vue-router beforeEach跳转路由验证用户登录状态


Posted in Javascript onDecember 26, 2018

使用vue判断验证用户登录状态

  • 导航钩子类似于生命周期钩子,包含路由进入前,进入后,更新时,退出前等几个周期,主要用于控制导航的前进后退或跳转等。
  • 其中router.beforeEach就是路由进入前的周期,同时有路由的来源和去向两个参数,可以判断和控制当前路由的走向和重定向。
  • 一般router.beforeEach配合vuex全局状态储存使用,验证用户登录状态。也可以结合sessionStorage 和localStorage使用,原理相同。

用户登录状态验证

路由配置

定义需要判断登录状态的meta 属性auth

const routes =[
  {
    path:'/',
    component: resolve => require(['../components/mainTem/Filtrate.vue'],resolve),
    meta:{auth:true,keepAlive: false},
    name:'Filtrate'
  },//首页
  {
    path:'/Home',
    component: resolve => require(['../components/mainTem/Home.vue'],resolve),
    meta:{auth:true,keepAlive: true },
    name:'Home'
  },//登录
  {
    path:'/Login',
    component: resolve => require(['../components/mainTem/Login.vue'],resolve),
    meta:{auth:true,keepAlive: false},
    name:'Login'
  },//最新案例
  {
    path:'/NewCase',
    component: resolve => require(['../components/mainTem/NewCase.vue'],resolve),
    meta:{auth:true,keepAlive: true},
    name:'NewCase'
  },//推荐
  {
    path:'/Recommend',
    component: resolve => require(['../components/mainTem/Recommend.vue'],resolve),
    meta:{auth:true,keepAlive: true},
    name:'Recommend'
  },//个人中心
  {
    path:'/User',
    component: resolve => require(['../components/mainTem/User.vue'],resolve),
    meta:{auth:true,keepAlive: true},
    name:'User'
  },//筛选
  {
    path:'/Filtrate',
    component: resolve => require(['../components/mainTem/Filtrate.vue'],resolve),
    meta:{auth:true,keepAlive: false},
    name:'Filtrate'
  },
  {//详情
    path:'/Detail',
    component: resolve => require(['../components/mainTem/Detail.vue'],resolve),
    meta:{auth:true,keepAlive: false},
    name:'Detail'
  }
]

监听

我用的是localStorage储存的用户token值。

业务逻辑:用户没有localStorage说明是第一次登录,则直接跳到登录页面,在登录页面储存token值,存在localStorage,用户关闭页面后,在24小时内,再次打开页面直接进入主页面,通过localStorage去判断当前token是否有效,如果已失效,则提示登录已超时,重新跳到登录页面。

meta
只有在路由中设置了meta auto属性为true的才判断,以上路由全部由设置

to
to为向后走的路由对象,包括路由的完整信息

from
from为从哪跳来的路由对象

next()
next()控制路由向下走,重新定义路由跳转的路由next(‘路由路径)

/** 验证用户是否登录 **/
router.beforeEach((to,from,next) => {
  if(to.matched.some( m => m.meta.auth)) {
    // console.log("先判断是否登录");
    if(to.name=='Login'){
      next();
    }else{
     if(localStorage.getItem('token')){

     //访问服务器缓存数据,判断当前token是否失效
      Vue.http.get("http:xxxx/Login/UserIsLogin?token="+localStorage.getItem('token')+"&url="+to.name,{withCredentials: true}).then(response => response.json()).then(num => {
          // console.log('是否登录',num);
          if(num.code==1001){
            next();
          }else{
            alert('您的token已超时,请重新登录');
            next('/Login');
          }
      })
     }else{
      next('/Login');
     }

    }
  } else {
    console.log("请先登录");
    next()
  }
})

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

Javascript 相关文章推荐
js类的静态属性和实例属性的理解
Oct 01 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
jquery中eq和get的区别与使用方法
Apr 14 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
JS实现复制功能
Mar 01 Javascript
React-Native中props具体使用详解
Sep 04 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
深入理解Vue Computed计算属性原理
May 29 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 #Javascript
使用Sonarqube扫描Javascript代码的示例
Dec 26 #Javascript
angular6的table组件开发的实现示例
Dec 26 #Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 #Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 #Javascript
微信小程序实现文字跑马灯
May 26 #Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 #Javascript
You might like
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
Thinkphp5框架实现图片、音频和视频文件的上传功能详解
2019/08/27 PHP
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
jQuery中获取Radio元素值的方法
2013/07/02 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
2015/12/05 Javascript
基于 Node.js 实现前后端分离
2016/04/23 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
详解JavaScript中this的指向问题
2017/01/20 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
2020/08/04 Javascript
token 机制和实现方式
2020/12/15 Javascript
结合Python的SimpleHTTPServer源码来解析socket通信
2016/06/27 Python
详谈python3中用for循环删除列表中元素的坑
2018/04/19 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
python os用法总结
2018/06/08 Python
python 自动轨迹绘制的实例代码
2019/07/05 Python
python返回数组的索引实例
2019/11/28 Python
关于Keras Dense层整理
2020/05/21 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
加拿大品牌鞋包连锁店:Little Burgundy
2021/02/28 全球购物
优秀会计求职信
2014/07/04 职场文书
农行心得体会
2014/09/02 职场文书
银行党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
财务部岗位职责
2015/02/03 职场文书
优秀团员个人总结
2015/02/26 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
投诉书范文
2015/07/02 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
职场新人知识:如何制定一份合理的工作计划?
2019/09/11 职场文书
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS