路由导航守卫 - 前置导航守卫 router.beforeEach

一、导航守卫

1.什么是导航守卫？

导航守卫就是路由跳转过程中的一些钩子函数，在通过函数中通过跳转或取消的方式守卫导航。

2.导航守卫分为几种？

前置导航守卫 router.beforeEach后置导航守卫 router.afterEach

const 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》对你有帮助，请点赞、收藏，并留下你的观点哦！