热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了vue-routerbeforeEach跳转路由验证用户登录状态,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

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

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


推荐阅读
  • 基于PgpoolII的PostgreSQL集群安装与配置教程
    本文介绍了基于PgpoolII的PostgreSQL集群的安装与配置教程。Pgpool-II是一个位于PostgreSQL服务器和PostgreSQL数据库客户端之间的中间件,提供了连接池、复制、负载均衡、缓存、看门狗、限制链接等功能,可以用于搭建高可用的PostgreSQL集群。文章详细介绍了通过yum安装Pgpool-II的步骤,并提供了相关的官方参考地址。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 开发笔记:加密&json&StringIO模块&BytesIO模块
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
  • 本文介绍了Java工具类库Hutool,该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装,并提供了各种Util工具类。同时,还介绍了Hutool的组件,包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码,提高开发效率。 ... [详细]
  • 本文介绍了Redis的基础数据结构string的应用场景,并以面试的形式进行问答讲解,帮助读者更好地理解和应用Redis。同时,描述了一位面试者的心理状态和面试官的行为。 ... [详细]
  • t-io 2.0.0发布-法网天眼第一版的回顾和更新说明
    本文回顾了t-io 1.x版本的工程结构和性能数据,并介绍了t-io在码云上的成绩和用户反馈。同时,还提到了@openSeLi同学发布的t-io 30W长连接并发压力测试报告。最后,详细介绍了t-io 2.0.0版本的更新内容,包括更简洁的使用方式和内置的httpsession功能。 ... [详细]
  • 本文介绍了Hyperledger Fabric外部链码构建与运行的相关知识,包括在Hyperledger Fabric 2.0版本之前链码构建和运行的困难性,外部构建模式的实现原理以及外部构建和运行API的使用方法。通过本文的介绍,读者可以了解到如何利用外部构建和运行的方式来实现链码的构建和运行,并且不再受限于特定的语言和部署环境。 ... [详细]
  • 图解redis的持久化存储机制RDB和AOF的原理和优缺点
    本文通过图解的方式介绍了redis的持久化存储机制RDB和AOF的原理和优缺点。RDB是将redis内存中的数据保存为快照文件,恢复速度较快但不支持拉链式快照。AOF是将操作日志保存到磁盘,实时存储数据但恢复速度较慢。文章详细分析了两种机制的优缺点,帮助读者更好地理解redis的持久化存储策略。 ... [详细]
  • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
  • 计算机存储系统的层次结构及其优势
    本文介绍了计算机存储系统的层次结构,包括高速缓存、主存储器和辅助存储器三个层次。通过分层存储数据可以提高程序的执行效率。计算机存储系统的层次结构将各种不同存储容量、存取速度和价格的存储器有机组合成整体,形成可寻址存储空间比主存储器空间大得多的存储整体。由于辅助存储器容量大、价格低,使得整体存储系统的平均价格降低。同时,高速缓存的存取速度可以和CPU的工作速度相匹配,进一步提高程序执行效率。 ... [详细]
  • 在重复造轮子的情况下用ProxyServlet反向代理来减少工作量
    像不少公司内部不同团队都会自己研发自己工具产品,当各个产品逐渐成熟,到达了一定的发展瓶颈,同时每个产品都有着自己的入口,用户 ... [详细]
  • 开发笔记:计网局域网:NAT 是如何工作的?
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了计网-局域网:NAT是如何工作的?相关的知识,希望对你有一定的参考价值。 ... [详细]
  • 一句话解决高并发的核心原则
    本文介绍了解决高并发的核心原则,即将用户访问请求尽量往前推,避免访问CDN、静态服务器、动态服务器、数据库和存储,从而实现高性能、高并发、高可扩展的网站架构。同时提到了Google的成功案例,以及适用于千万级别PV站和亿级PV网站的架构层次。 ... [详细]
  • 本文介绍了Redis中RDB文件和AOF文件的保存和还原机制。RDB文件用于保存和还原Redis服务器所有数据库中的键值对数据,SAVE命令和BGSAVE命令分别用于阻塞服务器和由子进程执行保存操作。同时执行SAVE命令和BGSAVE命令,以及同时执行两个BGSAVE命令都会产生竞争条件。服务器会保存所有用save选项设置的保存条件,当满足任意一个保存条件时,服务器会自动执行BGSAVE命令。此外,还介绍了RDB文件和AOF文件在操作方面的冲突以及同时执行大量磁盘写入操作的不良影响。 ... [详细]
  • 本文介绍了操作系统的定义和功能,包括操作系统的本质、用户界面以及系统调用的分类。同时还介绍了进程和线程的区别,包括进程和线程的定义和作用。 ... [详细]
author-avatar
HANK_LIU刘浩象_862
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有