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() } } })代码解释

这段代码是 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()`：结束页面加载进度条。

总体来说，这段代码的作用是对用户进行登录状态的校验和页面跳转的控制，保证用户在未登录或者访问未授权页面时被拦截并进行相应的跳转处理。

相关问题

import router from './router' import store from './store' import { Message } from 'element-ui' import NProgress from 'nprogress' import 'nprogress/nprogress.css' import { getToken } from '@/utils/auth' import { getInfo } from '@/api/login' NProgress.configure({ showSpinner: false }) const whiteList = ['/login', '/auth-redirect', '/bind', '/register','/homepage'] router.beforeEach((to, from, next) => { NProgress.start() if (getToken()) { to.meta.title && store.dispatch('settings/setTitle', to.meta.title) console.log("store.getters.roles====",store.getters.roles); console.log("getToken",getToken()) /* has token*/ if (to.path === '/login') { console.log("666666666") //判断身份非管理员跳转用户首页 if (store.getters.roles.length !== 0 && store.getters.roles.indexOf("admin") != -1 ) { console.log("7777777777777") next({ path: '/homepage' }) } else { console.log("88888888888888") next({ path: '/' }) } NProgress.done() } else { //其他路由 //角色未加载 if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息 store.dispatch('GetInfo').then(() => { store.dispatch('GenerateRoutes').then(accessRoutes => { // 根据roles权限生成可访问的路由表 router.addRoutes(accessRoutes) // 动态添加可访问路由表 next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 }) }).catch(err => { store.dispatch('LogOut').then(() => { Message.error(err) next({ path: '/' }) }) }) } else { next() } } } else { // 没有token if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入 next() } else { next(`/homepage?redirect=${to.fullPath}`) // 否则全部重定向到登录页 NProgress.done() } } }) router.afterEach(() => { NProgress.done() }) 这段代码我想让 store.getters.roles.length 一定存在 怎么办

你可以在 Vuex 的 state 中设置一个默认的 roles 数组，在用户登录时就将后台返回的用户角色存储到这个数组中。这样在 beforeach 中判断 store.getters.roles.length 是否为 0 时，就不会出现不存在的情况了。同时也要注意在用户退出登录时清空这个 roles 数组。

export function formatRouter(data) { return data.map((item) => { let i = 0; const route = { name: item.menuName, path: item.menuPath, component: import(`../${item.component}.vue`), children: [] } if (item.children && item.children.length > 0) { route.children = formatRouter(item.children) } return route }) } router.beforeEach((to, from, next) => { // 开启进度条 NProgress.start() next() }) router.afterEach((to, from) => { // 关闭进度条 NProgress.done() }) export default router

这段代码是关于路由的，主要包括两个部分。

第一部分是 `formatRouter` 函数，它的作用是将菜单数据转换为路由配置。传入一个菜单数据数组，每个菜单项包括菜单名、路径、组件以及可能的子菜单。函数通过递归调用自身来处理子菜单，并返回一个路由配置数组。

第二部分是关于路由导航守卫的代码。在 `beforeEach` 中，它会开启一个进度条，然后直接调用 `next` 函数，表示可以继续跳转到下一个路由；在 `afterEach` 中，它会关闭进度条。这些代码可以用于在路由跳转时显示进度条，提升用户体验。

总的来说，这段代码是为了实现一个前端路由，将菜单数据转换为路由配置，并提供路由导航守卫来控制路由跳转时的进度条显示。