若依框架前端permission.js文件解读：权限驱动路由

引入的依赖

import router from './router' // 导入路由配置
import store from './store'   // 导入 Vuex 状态管理
import { Message } from 'element-ui' // 导入 Element UI 的消息提示
import NProgress from 'nprogress' // 导入 NProgress 用于显示加载进度条
import 'nprogress/nprogress.css' // 导入 NProgress 的样式
import { getToken } from '@/utils/auth' // 导入用于获取用户 token 的工具函数
import { isRelogin } from '@/utils/request' // 导入用于处理重登录状态的工具

NProgress 配置

NProgress.configure({ showSpinner: false })

• 这行代码使用 NProgress 配置不显示加载的旋转器（spinner）。

白名单配置

const whiteList = ['/login', '/register'] // 定义不需要登录的路由

• 这里创建一个白名单数组，列出了不需要用户登录即可访问的路由，比如登录页面和注册页面。

路由守卫

router.beforeEach((to, from, next) => {

• beforeEach 是 Vue Router 提供的导航守卫，可以在路由切换前执行一些逻辑。

开始NProgress

NProgress.start()

• 在路由导航开始时，显示进度条。

有 Token 的情况

if (getToken()) {

• 检查是否存在用户 token（通常用于用户登录状态的检查）。

1. 设置页面标题

   to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
   

2. 处理已登录用户访问路由

   • 如果用户访问登录页 /login：

     if (to.path === '/login') {
       next({ path: '/' })
       NProgress.done()
     }
     

     • 重定向到主页（/）。并完成 NProgress。

   • 如果访问的是白名单中的路径：

     } else if (whiteList.indexOf(to.path) !== -1) {
       next()
     }
     

     • 直接放行。

   • 其他情况下：

     if (store.getters.roles.length === 0) {
     

     • 检查用户权限（roles），如果没有获取到角色信息，则拉取用户信息：

     store.dispatch('GetInfo').then(() => {
     

     动态添加路由：

     store.dispatch('GenerateRoutes').then(accessRoutes => {
       router.addRoutes(accessRoutes) // 动态添加可访问路由
       next({ ...to, replace: true }) // 确保addRoutes已完成
     })
     

     • 获取用户信息后，根据角色生成可访问的路由并动态添加到路由中。

   • 如果获取用户角色成功：

     } else {
       next()
     }
     

没有 Token 的情况

} else {

• 处理未登录用户的情形。

1. 判断白名单：

   if (whiteList.indexOf(to.path) !== -1) {
     next()
   }
   

   • 如果路径在白名单中，允许访问。

2. 重定向到登录页：

   else {
     next(`/login?redirect=${encodeURIComponent(to.fullPath)}`) 
     NProgress.done()
   }
   

   • 如果不在白名单中，重定向到登录页，并带上回调路径（redirect），便于用户登录后返回原先请求的页面。

路由完成后

router.afterEach(() => {
  NProgress.done()
})

• 在路由切换完成后，无论成功与否，结束 NProgress 的进度条显示。