permission.js

• 配置全局加载进度条和路由拦截；
• 配置免登录白名单；
• 根据用户权限动态生成路由表；

import router from './router'
import store from './store'
import { Message } from 'element-ui'
// 导入NProgress和样式表，用于显示页面加载进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/auth'
import { isRelogin } from '@/utils/request'
// 配置NProgress，隐藏加载进度条中的旋转器
NProgress.configure({ showSpinner: false })
// 白名单数组，包含不需要登录即可访问的路由路径
const whiteList = ['/login', '/register']

// 在路由守卫中，对每个导航操作进行拦截
router.beforeEach((to, from, next) => {
  // 开始显示进度条
  NProgress.start()
  // 用户已登录（存在令牌）
  if (getToken()) {
    // 若路由元信息中定义了标题，则设置在Vuex中的的网页标题中
    to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
    /* has token*/
    // 如果用户已登录且正尝试访问登录页面，则重定向到根路径并停止加载进度条
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else if (whiteList.indexOf(to.path) !== -1) {
      // 如果用户已登录且正尝试访问白名单中的路由，则允许访问
      next()
    } else {
      // 如果用户已登录但尚未获取到角色信息，则执行以下操作：
      if (store.getters.roles.length === 0) {
        isRelogin.show = true
        // 判断当前用户是否已拉取完user_info信息
        store.dispatch('GetInfo').then(() => {
          isRelogin.show = false
          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(`/login?redirect=${encodeURIComponent(to.fullPath)}`) // 否则全部重定向到登录页
      
      NProgress.done()
    }
  }
})
// 每个路由导航完成后，停止显示加载进度条 
router.afterEach(() => {
  NProgress.done()
})

store.dispatch('GenerateRoutes').then(accessRoutes => {
     // 根据roles权限生成可访问的路由表
     router.addRoutes(accessRoutes) // 动态添加可访问路由表
     next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
})

这段代码的作用是：

• 调用 Vuex 存储中的 GenerateRoutes action，根据用户的角色信息生成可访问的路由表；
• 使用 router.addRoutes 方法动态地将可访问的路由添加到 Vue Router 实例中；
• 使用 next 函数继续导航到目标路由，并使用 replace: true 选项来替换当前历史记录中的条目。

---

hack 方法的作用：

在 Vue Router 中，动态添加路由后，需要等待 Vue Router 完成更新路由表的过程，才能继续导航到目标路由。然而，在某些情况下，导航操作可能会在路由表更新完成之前执行，导致导航失败。

为了解决这个问题，使用了这个 "hack" 方法。通过使用 replace: true 选项，导航操作将替换当前历史记录中的条目，而不是添加一个新的条目。这迫使 Vue Router 在继续导航之前完成路由表更新。

因此，这个 "hack" 方法可以确保在动态添加路由后，导航操作能够正确地执行。