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

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. django 之 ContentType的使用

    1. ContentType 是干什么用的呢: 1. ContentType: 主要的作用就是Django orm的创建表的时候,可以方便多表查询使用,简化多表查询的过程 2.ContentType ...

  2. 浅谈 MongoDB

    MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案.他支持的数据结构非常松散,是类似json的bson格式,因此可以存储比较 ...

  3. python中TCP协议中的粘包问题

    TCP协议中的粘包问题 1.粘包现象 基于TCP实现一个简易远程cmd功能 #服务端 import socket import subprocess sever = socket.socket() s ...

  4. eclipse配置maven仓库

    在eclipse中搭建maven工程时,首先需要搭建好maven本地仓库,搭建过程比较简单 1.首先,在eclipse中,打开windows->Maven->User Settings; ...

  5. [C++] C语言及C++语言中包含的头文件名称,及作用

    头文件主目录include 头文件目录中总共有32个.h头文件.其中主目录下有13个,asm子目录中有4个,linux子目录中有10个,sys子目录中有5个.这些头文件各自的功能如下,具体的作用和所包 ...

  6. python学习Day11 函数的参数列表

    复习 什么是函数? 具体特定功能的代码块 - 特定功能代码作为一个整体,并给该整体命名,就是函数 函数的优点 : 1.减少代码的冗余,2.结构清晰,可读性强 3.具有复用性,开发效率高,维护成本高 如 ...

  7. vue 自定义组件使用v-model(组件通信方式1)

    父组件通过v-model传递值给子组件时,会自动传递一个value的prop属性,在子组件中通过this.$emit(‘input’,val)自动修改父组件v-model绑定的值 child: < ...

  8. 区间修改区间求和cdq分治

    https://www.luogu.org/problemnew/show/P3372 #include<bits/stdc++.h> #define fi first #define s ...

  9. Mybatis useGeneratedKeys 填充自增主键值(使用Mysql)的原理分析

    一.Mybatis配置 <insert id="insert" parameterType="com.test.TestDO" keyProperty=& ...

  10. 4. Go常量

    常量就是那些不可以改变的值 Go语言中定义常量的方式: const a = "admin" 则 a 就是一个常量,但实际上其后面的 "admin" 也是一个字符 ...