一、导航守卫
1.什么是导航守卫?
导航守卫就是路由跳转过程中的一些钩子函数,在通过函数中通过跳转或取消的方式守卫导航。
2.导航守卫分为几种?
前置导航守卫 router.beforeEach后置导航守卫 router.afterEachconst router = new VueRouter({... })router.beforeEach((to, from, next) => {// to:即将要进入的目标// from:当前导航正要离开的路由// next:next 是一个函数,通常是指放行,next() 直接放行 ,next(路径) 跳转到某一个页面})router.afterEach((to, from) => {// ...})
二、权限拦截流程分析
用户访问页面,触发导航守卫钩子函数,然后按照如下流程进行解析。
白名单:那些不需要 token 就可以直接访问的页面,那么哪些页面不需要 token 就能够直接访问呢 ?
login页面404页面
三、实现权限拦截
// 导入路由模块import router from './router'import store from './store'// 路由白名单:那些不需要 token 就可以直接访问的页面const whiteList = ['/login', '/404']// 创建前置路由守卫router.beforeEach((to, from, next) => {// 获取 tokenconst token = store.state.user.token// 判断 token 是否存在if (token) {// 是否是登录页面if (to.path === '/login') {// 如果有 token,访问登录页面,跳转到主页next('/')} else {// 如果有 token,访问不是登录页面,直接放行next()}} else {// 判断访问的路由在不在白名单if (whiteList.includes(to.path)) {// 如果没有 token,但在白名单中,则放行next()} else {// 如果没有 token,也不在白名单中,则跳转到登录页next('/login')}}})
对于白名单的判断,使用数组的 includes() 方法,检查这个元素在数组中是否存在
includes() 方法解析
如果觉得《路由导航守卫 - 前置导航守卫 router.beforeEach》对你有帮助,请点赞、收藏,并留下你的观点哦!