美文网首页
VUE全局路由守卫

VUE全局路由守卫

作者: 嘤夏影 | 来源:发表于2019-04-24 14:53 被阅读0次

在router.js中

//设置白名单,指不需要登录就可以直接进入的页面
var whiteList = ["/login","/welcome"]
//这里使用cookie.js,登录成功后将后台返回的token保存在cookie中
// Cookies.set('admin_token','token_value');
var hasToken = Cookies.get('admin_token');
router.beforeEach((to, from, next) => {
    //to: 即将要进入的目标 [路由对象]
    //from:当前导航正要离开的路由
    //next:一定要调用该方法来 resolve 这个钩子
     if (hasToken) {
        if (to.path === '/login') {
            next({ path: '/' })
        } else { 
            next()
        } 
      }else {
        if (whiteList.indexOf(to.path) !== -1) {
            next()//这里是即将进入的页面是白名单的页面就直接进入
        } else { 
            next({ path: '/login' })//这里是即将进入的页面不是白名单的页面又没有token的情况下重定向到登录页面进行登录操作
        } 
      }
})

相关文章

  • 华云

    一,vue路由守卫的生命周期1,全局的前置路由守卫 router.beforeEach()2, 全局解析守卫 ...

  • vue-router 常见导航守卫

    全局守卫vue-router全局有三个守卫 路由独享守卫如果你不想全局配置守卫的话,你可以为某些路由单独配置守卫 ...

  • react实现路由守卫

    与vue不同,vue直接使用beforeEach即可实现全局路由守卫等功能。react要实现路由守卫得自己配置。实...

  • Vue设置路由拦截

    路由守卫 在Vue中分为全局前置守卫 router.beforeEach ,和全局后置钩子 router.afte...

  • vue导航守卫

    根据作用域的不同,vue导航守卫分三种:全局导航守卫、组件内部导航守卫、路由独享守卫 全局导航守卫,在main.j...

  • vue-router路由拦截器

    Vue Router 是vue.js官方路由管理器 路由出口 声明式导航 编程式导航 全局前置守卫 全局后置钩子 ...

  • 关于vue路由守卫做登陆状态判断的问题

    关于vue路由守卫做登陆状态判断的问题 直接上代码 // 全局路由守卫 router.beforeEach((to...

  • vue的路由守卫

    路由守卫分3种:全局守卫路由独享守卫组件内的路由守卫 1.全局守卫:beforeEachbeforeResolve...

  • Vue路由守卫

    一、全局路由守卫 全局路由前置守卫 当用Vue开发的时候,如果项目涉及登录的话,一般都要做登录验证。用户必须先登录...

  • 2021-04-11

    vue-router 路由钩子函数(导航守卫) 路由钩子函数有三种: 全局钩子: beforeEach(全局前置守...

网友评论

      本文标题:VUE全局路由守卫

      本文链接:https://www.haomeiwen.com/subject/apdggqtx.html