vue 简易路由导航守卫

vue路由导航守卫

vue 官方文档

目的：在没有登录之前，无法进入首页

src/router/index.js

   improt Vue from 'vue'
   import Router from 'vue-router'
   
   // 引入两个组件
   improt index from '../pages/TestIndex'
   improt login from '../pages/TestLogin'
   
   Vue.use(Router)
   
   const router = new Router（{
        mode:"history",    //去除 #
        routes:[
            {
                path:"/",
                name:"index",
                component:index
            },
            {
                path:"/index",
                name:"index",
                component:index
            },
            {
                path:"/login",
                name:"login",
                component:login   
             }
        ]
   }）
   
   router.beforeEach((to,from,next)=>{
        //登录时保存的token
        let token = sessionStorage.getItem("access-token")
        //如果直接访问登录页面
        if(to.path == "/login"){
           //如果信息存在，是登陆过，跳转到主页，信息不存在，则没有登陆过，继续登录
            if(token){
                next({path:"/"})
            }else{
                next()
            }
        //如果访问的是非登录页面
        }else{
            //信息不存在，则直接跳转登陆页面
            if(!token){
                next({path:"/login"})
            }else{
                next()
            }
        }
   })
   
   export default router;