vue 导航守卫,验证是否登录
路由跳转前,可以用导航守卫判断是否登录,如果登录了就正常跳转,没有登录就把路由指向登录页面。
router.beforeEach((to, from, next) => {
const nextRoute = [ 'api', 'my/index, 'course'];
if(nextRoute.indexOf(to.name) >= 0){
//可以在这里面判断是否登录了
if (!store.state.auth.IsLogin) {
vueRouter.push({name: 'login'})
}
}
if (to.name === 'login') {
if (auth.IsLogin) {
vueRouter.push({name: 'home'});
}
}
next();//一定要加上,不然不解析模板
})
to:即将进入的路由
from:即将离开的路由
next:是一个函数,一定要加上,不然不解析模板
vue 导航守卫,验证是否登录的更多相关文章
- Vue导航守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave详解
Vue导航守卫以我自己的理解就是监听页面进入,修改,和离开的功能.每个守卫接受三个参数 to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: F ...
- vue导航守卫和axios拦截器的区别
在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时 ...
- [Vue]导航守卫:全局的、单个路由独享的、组件级的
正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的 ...
- 添加一个vue全局守卫,主要用于用户登录时候验证
//注册一个全局守卫,作用是在路由跳转钱,对路由进行判断,防止未登录用户跳转到其他页面 router.beforeEach((to, from, next) => { let token = l ...
- vue 导航守卫
1.全局守卫(在所有路由展示前触发)//在main.js中 router.beforeEach((to, from, next) => { to 即将要进入的到的路由,值为路由 ...
- Vue(7)- vue-cookies、极验滑动验证geetest、vue-router的导航守卫
一.vue-cookies 参考文档简书:https://www.jianshu.com/p/535b53989b39 参考文档npm:https://www.npmjs.com/package/vu ...
- vue2.0 实现导航守卫(路由守卫)---登录验证
路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫 ...
- vue路由守卫用于登录验证权限拦截
vue路由守卫用于登录验证权限拦截 vue路由守卫 - 全局(router.beforeEach((to, from, next) =>来判断登录和路由跳转状态) 主要方法: to:进入到哪个路 ...
- Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]
前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...
随机推荐
- python练习题_03
1.写函数: 根据范围获取其中3和7整除的所有数的和,并返回调用者: 符合条件的数字个数以及符合条件的数字的总和,如:def func(start,end): def func(start,end): ...
- 每日一练之排序算法(P1097 统计数字)
某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5×10^9).已知不相同的数不超过10000个,现在需要统计这些自然数各自出现的次数,并按照自然数从小到大的顺序输出统计结果. ...
- (转)php读取文件使用redis的pipeline导入大批量数据
第一次写博客,哈哈,纯属用来记录一下自己工作中遇到的问题及解决办法. 昨天因为工作的需求,需要做一个后台上传TXT文件,读取其中的内容,然后导入redis库中.要求速度快,并且支持至少10W以上的数据 ...
- MySQL慢查询日志相关的文件配置和使用。
MySQL慢查询日志提供了超过指定时间阈值的查询信息,为性能优化提供了主要的参考依据,是一个非常实用的功能,MySQL慢查询日志的开启和配置非常简单,可以指定记录的文件(或者表),超过的时间阈值等就可 ...
- appium初步认识
Appium简介: appium官网:http://appium.io/ 一.什么是appium Appium是一个开源.跨平台的测试框架,可以用来测试原生及混合的移动端应用.Appium支持IOS. ...
- CCNA学习视频
CCNA:链接:https://pan.baidu.com/s/1aiZC4pbYIu9qJSWcVfKwWw 提取码请私信楼主
- Tomcat 配置文件
Tomcat 的配置文件并不多,由4个 xml 文件组成,分别是 context.xml.web.xml.server.xml.tomcat-users.xml 这几个文件.每个文件都有自己的功能与配 ...
- layui xtree 实现一级节点单选 ,子节点复选
在外部定义变量和方法 //定义变量 接收顶级节点的值 var topValue; // 获取顶级节点值的方法 function getParent(value) { var val = project ...
- pandas操作行集锦
pandas移花接木 数据准备两表: 我们接下来要进行的操作: 增 将两表进行合并 # 把两张表合并,但是这样有问题,索引会重复的进行0-19 students = page_001.append(p ...
- Python 解决命令行删除、退格乱码问题
安装了python 在命令行界面无法进行删除.退格 1 安装readline模块 两种方式:yum install -y readline-devel readline 或者 下载文件https:/ ...