vue登录路由验证的实现


Posted in Javascript onDecember 13, 2017

vue的项目的登录状态如果用vuex状态管理,页面一刷新vuex管理的状态就会消失,这样登录路由验证就没有意义了。可以将登录的状态写到web Storage中进行存储管理。

步骤如下:

1、在登录组件里,将登录状态写入web Storage里。(一般写入session Storage,会话关闭,存储数据自动删除)

if('登录成功') 
 {sessionStorage.setItem('accessToken' , 写入登录成功返回的登录令牌或者自定义的判断字符串) }

2、在需要登录验证的路由元信息里加入登录验证标识requiresAuth(自定义)    
[html] view plain copy

routers: [ 
      { path: '/listInfo', 
         name: 'listInfo', 
         component: listInfo, 
         meta: { requiresAuth: true  
               } 
          } 
       ]

3、在全局钩子函数beforeEach中验证页面是否需要登录            

router.beforeEach((to, from, next) => {  
    //to即将进入的目标路由对象,from当前导航正要离开的路由, next : 下一步执行的函数钩子
    if(to.path === '/login') { next() } // 如果即将进入登录路由,则直接放行
     else {   //进入的不是登录路由
         if(to.meta.requiresAuth && !sessionStorage.getItem('accessToken')) {next({ path: '/login' })} 
       //下一跳路由需要登录验证,并且还未登录,则路由定向到 登录路由
       else { next() }} 
      //如果不需要登录验证,或者已经登录成功,则直接放行
    }

 注意点:beforeEach这个全局钩子要放到全局组件的前面,放到全局组件的后面,Vue实例已经加载完成。这时候直接在浏览器的地址栏输入要去的路由,则不会定向到登录路由。 

vue登录路由验证的实现

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的让页面控件不可用的实现代码
Apr 27 Javascript
基于jquery+thickbox仿校内登录注册框
Jun 07 Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
JQuery获取各种宽度、高度(format函数)实例
Mar 04 Javascript
Javascript缓存API
Jun 14 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
js禁止表单重复提交
Aug 29 Javascript
深入Vue-Router路由嵌套理解
Aug 13 Javascript
vue遍历生成的输入框 绑定及修改值示例
Oct 30 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 Javascript
vue按需加载组件webpack require.ensure的方法
Dec 13 #Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
Dec 13 #Javascript
vue组件中使用iframe元素的示例代码
Dec 13 #Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 #Javascript
vue实现nav导航栏的方法
Dec 13 #Javascript
vue实现导航栏效果(选中状态刷新不消失)
Dec 13 #Javascript
仿京东快报向上滚动的实例
Dec 13 #Javascript
You might like
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
PHP中文件上传的一个问题
2010/09/04 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
js 匿名调用实现代码
2009/06/19 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
JavaScript 事件系统
2010/07/22 Javascript
ajax更新数据后,jquery、jq失效问题
2011/03/16 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
举例详解Python中smtplib模块处理电子邮件的使用
2015/06/24 Javascript
全面解析Bootstrap图片轮播效果
2015/12/03 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
python实现博客文章爬虫示例
2014/02/26 Python
python使用smtplib模块通过gmail实现邮件发送的方法
2015/05/08 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
Python基于requests库爬取网站信息
2020/03/02 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
标记环网Toke Ring IEEE802.5
2014/05/26 面试题
申报职称专业技术个人的自我评价
2013/12/12 职场文书
会计学个人自荐信模板
2013/12/13 职场文书
物流业务员岗位职责
2014/02/08 职场文书
考博专家推荐信
2014/05/10 职场文书
保护环境建议书400字
2014/05/13 职场文书
2014年个人思想工作总结
2014/11/27 职场文书
学校学习型党组织建设心得体会
2019/06/21 职场文书
创业计划书之校园跑腿公司
2019/09/24 职场文书