当前位置 主页 > 网站技术 > 代码类 >

    vue在路由中验证token是否存在的简单实现

    栏目:代码类 时间:2019-11-11 21:05

    1. 在router/index.js进行验证

    2. 代码如下:

    import Vue from 'vue'
    import Router from 'vue-router'
    import Login from '@/components/common/Login';
    ......
    
    Vue.use(Router)
    const router = new Router({
     routes: [{
       path: '/',
       name: Login,
       component: Login,
      },
      {
       path: '/home',
       component: Home,
       meta: {                  
        requiresAuth: true   // 要求验证的页面,在此情况下其子页面也会被验证.
       },
       children: [{
         path: '/paChong',
         name: 'PaChong',
         component: PaChong
        }
       ]
      }
     ]
    })
    router.beforeEach((to, from, next) => {
     if (to.matched.some(record => record.meta.requiresAuth)) {   // 哪些需要验证
      if (!sessionStorage.getItem("token")) {           // token存在条件  
       next({
        path: '/',                        // 验证失败要跳转的页面
        query: {
          redirect: to.fullPath                 // 要传的参数
         }
       })
      } else {
       next()
      }
     } else {
      next()                            // 确保一定要调用 next()
     }
    })
    
    export default router
    

    以上这篇vue在路由中验证token是否存在的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持IIS7站长之家。