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 相关文章推荐
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
ES6新特性二:Iterator(遍历器)和for-of循环详解
Apr 20 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
深入理解Vue官方文档梳理之全局API
Nov 22 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
Oct 30 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
xss防御之php利用httponly防xss攻击
2014/03/21 PHP
Zend Framework框架Smarty扩展实现方法
2016/03/22 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
脚本收藏iframe
2006/07/21 Javascript
javascript基本语法分析说明
2008/06/15 Javascript
JavaScript 定义function的三种方式小结
2009/10/16 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
JQuery里面的几种选择器 查找满足条件的元素$("#控件ID")
2011/08/23 Javascript
实现web打印的各种方法介绍及实现代码
2013/01/09 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
javascript阻止scroll事件多次执行的思路及实现
2013/11/08 Javascript
Jquery中"$(document).ready(function(){ })"函数的使用详解
2013/12/30 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
浅谈JS运算符&&和|| 及其优先级
2016/08/10 Javascript
canvas实现动态小球重叠效果
2017/02/06 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
layui文件上传实现代码
2017/05/20 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
jQuery zTree树插件的使用教程
2019/08/16 jQuery
JS实现京东商品分类侧边栏
2020/12/11 Javascript
python中numpy包使用教程之数组和相关操作详解
2017/07/30 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
python tkinter之顶层菜单、弹出菜单实例
2020/03/04 Python
安装python依赖包psycopg2来调用postgresql的操作
2021/01/01 Python
班队活动设计方案
2014/01/30 职场文书
安全生产标语
2014/06/06 职场文书
生物科学专业自荐书
2014/06/20 职场文书
妈妈活动方案
2014/08/15 职场文书
批评与自我批评总结
2014/10/17 职场文书
国博复兴之路观后感
2015/06/02 职场文书
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android