第71讲路由守卫实现前端鉴权跳转

路由守卫实现前端鉴权跳转

路由守卫就是路由跳转过程中的一些钩子函数 ，在路由跳转的时候，做一些判断或其它的操作。 类似于组件生命周期钩子函数

我们用beforeEach(to, from, next) 全局前置守卫，路由跳转前触发

to： 即将要进入的目标路由对象
from： 即将要离开的路由对象
next(Function)：是否可以进入某个具体路由，或者是某个具体路由的路径

router目录下面新建permission.js

import router from '@/router/index'

const whiteList=['/login']
router.beforeEach((to,from,next)=>{
   let token=window.sessionStorage.getItem("token");
   console.log("token="+token);
   console.log("to.path="+to.path)
   if(token){
       if(to.path=="/login"){  // 如果是登录请求
           next("/") // 跳转后台管理页面
       }else{
           next(); // 放行
       }
   }else{
       if(whiteList.includes(to.path)){
           next() // 放行
       }else{
           next("/login") // 跳转登录页面
       }
   }
})

main.js里面导入：

import '@/router/permission.js'