router.beforeEach((to, from, next) => { nprogress.start() if (store.getters.token) { // 有token if (to.path === '/login') { // 即将要去登录页 next('/') // 跳转到首页 nprogress.done() // 被拦截到其他页面时,不会触发后置守卫 } else { next() // 正常放行 } } else { // 没有token if (whiteList.includes(to.path)) { next() // 正常放行 } else { next('/login') nprogress.done() } } })代码解释
时间: 2024-03-15 12:41:47 浏览: 158
vue router导航守卫(router.beforeEach())的使用详解
5星 · 资源好评率100%
这段代码是 Vue Router 的全局前置守卫(beforeEach)函数,当用户进行页面跳转时,会先执行该函数进行拦截和校验。具体解释如下:
1. `nprogress.start()`:使用 nprogress 库,开始显示页面加载进度条。
2. `if (store.getters.token)`:判断当前用户是否已经登录(即是否存在 token)。
3. `to.path === '/login'`:如果用户即将要访问登录页,则将其重定向到首页。
4. `next('/')`:将用户重定向到首页,并且不再执行后面的守卫函数。
5. `nprogress.done()`:结束页面加载进度条。
6. `next()`:正常放行,继续执行后面的守卫函数。
7. `whiteList.includes(to.path)`:判断当前用户访问的路径是否在白名单中,如果在则不需要登录即可访问。
8. `next('/login')`:将用户重定向到登录页。
9. `nprogress.done()`:结束页面加载进度条。
总体来说,这段代码的作用是对用户进行登录状态的校验和页面跳转的控制,保证用户在未登录或者访问未授权页面时被拦截并进行相应的跳转处理。
阅读全文