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

 更新时间:2018年12月26日 14:54:55   作者:Aimee芊  
这篇文章主要介绍了vue-router beforeEach跳转路由验证用户登录状态,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

使用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()
  }
})

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

相关文章

  • VUE3刷新页面报错问题解决:Uncaught SyntaxError:Unexpected token '<'

    VUE3刷新页面报错问题解决:Uncaught SyntaxError:Unexpected token &apo

    这篇文章主要介绍了VUE3刷新页面报错:Uncaught SyntaxError: Unexpected token ‘<‘,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • webstorm添加vue.js支持的方法教程

    webstorm添加vue.js支持的方法教程

    因为本人使用的是webstorm2016 2.3版本,结果竟然不支持vue文件,所以找到了一个解决方法,下面这篇文章主要给大家介绍了关于webstorm添加vue支持的方法教程,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-07-07
  • 浅谈vuex为什么不建议在action中修改state

    浅谈vuex为什么不建议在action中修改state

    这篇文章主要介绍了浅谈vuex为什么不建议在action中修改state,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • Vue实现自定义视频和图片上传的示例代码

    Vue实现自定义视频和图片上传的示例代码

    这篇文章主要为大家详细介绍了如何通过Vue实现自定义视频和图片上传的功能,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-04-04
  • vue 自动生成swagger接口请求文件的方法

    vue 自动生成swagger接口请求文件的方法

    这篇文章主要介绍了vue 自动生成swagger接口请求文件的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • Vue表格组件Vxe-table使用技巧总结

    Vue表格组件Vxe-table使用技巧总结

    这篇文章主要给大家介绍了关于Vue表格组件Vxe-table使用技巧的相关资料,文中还介绍了VXEtable展示指定行所遇到得问题,对大家学习或者使用Vxe-table具有一定的参考学习价值,需要的朋友可以参考下
    2022-09-09
  • javascript中Set、Map、WeakSet、WeakMap区别

    javascript中Set、Map、WeakSet、WeakMap区别

    这篇文章主要介绍了javascript中Set、Map、WeakSet、WeakMap区别,需要的朋友可以参考下
    2022-12-12
  • Vue3中的组件数据懒加载

    Vue3中的组件数据懒加载

    这篇文章主要介绍了Vue3中的组件数据懒加载问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 前端vuex中dispatch的使用方法总结

    前端vuex中dispatch的使用方法总结

    这篇文章主要给大家介绍了关于前端vuex中dispatch使用方法的相关资料,vuex的dispatch方法用于触发一个action,以便更新state,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-04-04
  • 如何给element添加一个抽屉组件的方法步骤

    如何给element添加一个抽屉组件的方法步骤

    这篇文章主要介绍了如何给element添加一个抽屉组件的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07

最新评论