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 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
js编写贪吃蛇的小游戏
Aug 24 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
Dec 18 Javascript
jQuery中JSONP的两种实现方式详解
Sep 26 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
vue elementui 实现搜索栏公共组件封装的实例代码
Jan 20 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
Zend引擎的发展 [15]
2006/10/09 PHP
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
使用dump函数,给php加断点测试
2013/06/25 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
js实现浏览器的各种菜单命令比如打印、查看源文件等等
2013/10/24 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
原生js实现放大镜效果
2017/01/11 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
2017/05/25 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
微信小程序自定义导航栏
2018/12/31 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
2019/09/15 jQuery
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
python文件的md5加密方法
2016/04/06 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
Python实现的简单计算器功能详解
2018/08/25 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
python爬取网易云音乐评论
2018/11/16 Python
Django之模型层多表操作的实现
2019/01/08 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
tensorflow实现在函数中用tf.Print输出中间值
2020/01/21 Python
Python requests上传文件实现步骤
2020/09/15 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
意大利高端时尚买手店:Stefania Mode
2018/03/01 全球购物
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
中学生自我鉴定
2014/02/04 职场文书
运动会闭幕式致辞
2015/07/29 职场文书