全局前置守卫:router.beforeEach
router.beforeEach((to,from,next) => {
console.log(from)
next()
})
to: router即将要进入路由的页面
from: router当前导航即将要离开的页面
next: 执行过程中下一个狗子,如果全部执行完毕了,则导航的状态是confirmed
next(false): 中断当前导航,如果当前浏览器地址改变了,或者用户点击前进后退按钮,则url地址会重置到from路由对应的地址
next('/'): 或者next({path:'/'}),跳转到一个不同的地址,当前导航倍中断,然后进行一个新的导航
案例:
在登录页面中当表单验证通过的时候,获取接口的token并本地存储
main.ts:
// 权限判断
import router from '../../router'
const whiteList = ['/'] // 配置白名单
router.beforeEach((to,from,next) => {
if(whiteList.includes(to.path) || sessionStorage.getItem('token')){
next()
} else {
next('/')
}
})
全局后置守卫:router.afterEach
完整案例:
安装less: npm install less less-loader -D
log