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

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. Java数据类型(primitive)原始数据类型

    1.小心别溢出来. 要确保变量能存下来所保存的值. 你无法用小杯子装大值.好吧,其实可以,但是会损失某些信息,也就是所说的溢位.当判断到所使用的容器不足以装载时,编译器会试着防止珍重情况发生.举例来说 ...

  2. Linux su命令

    本人以前一直习惯直接使用root,很少使用su,前几天才发现su与su -命令是有着本质区别的! 大部分Linux发行版的默认账户是普通用户,而更改系统文件或者执行某些命令,需要root身份才能进行, ...

  3. kinect 深度图与彩色图对齐程序

    //#include "duiqi.hpp" #include "kinect.h" #include <iostream> #include &q ...

  4. C博客01--顺序、分支结构

    1.本章学习总结 1.1 思维导图 1.2 本章学习体会及代码量学习体会 1.2.1 学习体会 经过一周的初步学习,对C语言我有了一定的认识,也体验到了代码的乐趣,这应该为我以后的学习开了一个好头.在 ...

  5. java中常规使用的mysql语句

    1.登录型校验 limit 1,例如: SELECT `password`FROM workerWHERE phone = 18611406603LIMIT 1 结果无值,不需验证;有值,校验 2.存 ...

  6. margin的垂直方向塌陷

    标签(空格分隔): margin塌陷 margin垂直方向塌陷问题: 如下代码: <!DOCTYPE html> <html lang="en"> < ...

  7. Java框架spring 学习笔记(四):BeanPostProcessor接口

    如果我们需要在Spring容器完成Bean的实例化,配置和其他的初始化前后后添加一些自己的逻辑处理. 编写InitHelloWorld.java package com.example.spring; ...

  8. Window上编译最新版libCef(Branch 2704)(转载)

    转自http://blog.csdn.net/mfcing/article/details/52066579 1.开发环境搭建   VS2010及以上版本,CMake 2.8.12.1及以上版本.我安 ...

  9. 报错:APP has stopped

     由于在 /MyActivity/AndroidManifest.xml 中把activity的类名打错,而导致程序加载后即出错. 而输错启动程序的类名并不会引起报错,因此这个应该引起注意.

  10. css样式之input输入框默认样式

    帮朋友写个简单的课程设计,后面会贴出来,项目刚开始就遇到一个坑(给input输入框设定样式,但是,点击后会出现蓝色边框),之前写其他的项目时也遇到过,百度一下资料解决了,现在又碰到了,写一下,留着备用 ...