路由跳转前,可以用导航守卫判断是否登录,如果登录了就正常跳转,没有登录就把路由指向登录页面。

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 导航守卫,验证是否登录的更多相关文章

  1. Vue导航守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave详解

    Vue导航守卫以我自己的理解就是监听页面进入,修改,和离开的功能.每个守卫接受三个参数 to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: F ...

  2. vue导航守卫和axios拦截器的区别

    在Vue项目中,有两种用户登录状态判断并处理的情况,分别为:导航守卫和axios拦截器. 一.什么是导航守卫? vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.(在路由跳转时 ...

  3. [Vue]导航守卫:全局的、单个路由独享的、组件级的

    正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的. 记住参数或查询的改变并不会触发进入/离开的 ...

  4. 添加一个vue全局守卫,主要用于用户登录时候验证

    //注册一个全局守卫,作用是在路由跳转钱,对路由进行判断,防止未登录用户跳转到其他页面 router.beforeEach((to, from, next) => { let token = l ...

  5. vue 导航守卫

    1.全局守卫(在所有路由展示前触发)//在main.js中 router.beforeEach((to, from, next) => {      to 即将要进入的到的路由,值为路由    ...

  6. Vue(7)- vue-cookies、极验滑动验证geetest、vue-router的导航守卫

    一.vue-cookies 参考文档简书:https://www.jianshu.com/p/535b53989b39 参考文档npm:https://www.npmjs.com/package/vu ...

  7. vue2.0 实现导航守卫(路由守卫)---登录验证

    路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫 ...

  8. vue路由守卫用于登录验证权限拦截

    vue路由守卫用于登录验证权限拦截 vue路由守卫 - 全局(router.beforeEach((to, from, next) =>来判断登录和路由跳转状态) 主要方法: to:进入到哪个路 ...

  9. Vue的钩子函数[路由导航守卫、keep-alive、生命周期钩子]

    前言 说到Vue的钩子函数,可能很多人只停留在一些很简单常用的钩子(created,mounted),而且对于里面的区别,什么时候该用什么钩子,并没有仔细的去研究过,且Vue的生命周期在面试中也算是比 ...

随机推荐

  1. C# 多线程传递参数或多个参数

    using System;using System.IO;using System.Text;using System.Threading; namespace ConsoleApp7{ class ...

  2. k8s之调度约束

    k8s调度约束有两种:第一种,直接指定某台node主机:这种形势将直接跳过调度器.如下: 第二种:先给各node指定标签,然后在通过标签的形势来关联node,这种形势人就会调用到调度器.如下: yao ...

  3. icons 在线网站

    icons https://www.iconfinder.com/ http://v3.bootcss.com/components/ http://fontawesome.io/icons/ htt ...

  4. select 自匹配问题

    原生js给select赋值或者vue绑定数据,会自匹配下拉选项的value或者key,从而显示对应的label或者对应的option的html eg: 原生: <select name=&quo ...

  5. python中类中的@property

    @property考察 Student 类: class Student(object): def __init__(self, name, score): self.name = name self ...

  6. List和符号分隔的字符串互相转换

    一.将逗号分隔的字符串转换成List: 1. 使用JDK的Arrays类: import java.util.Arrays; import java.util.List; public class T ...

  7. VirtualBox 休眠恢复后无法联网解决办法

    环境:lubuntu 首先ifconfig查看网卡名,我这里是enp0s3. 接着: sudo ifconfig enp0s3 down sudo ifconfig enp0s3 up sudo dh ...

  8. Could not HEAD 'https://dl.google.com/dl/android/maven2/com/android/tools/build/gradle/3.2.0/gradle-3.2.0.pom'.

  9. python——获取文件列表

    """-------------------------------------------------------- <<获取文件列表>> () ...

  10. mysql学习笔记--遇到的坑

    一.navcat 连接不支持密码输入 1. 先通过命令行进去mysql的root账户 mysql -uroot -p'password' 2. 更改加密方式 alter user 'root'@'lo ...