import NProgress from 'nprogress' import 'nprogress/nprogress.css' import router from '@/router' import { RouteLocationNormalized } from 'vue-router' import { useUserStoreHook } from '@/store/modules/user' import { usePermissionStoreHook } from '@/store/modules/permission' import { ElMessage } from 'element-plus' import { whiteList } from '@/config/white-list' import rolesSettings from '@/config/roles' import { getToken } from '@/utils/cookies' const userStore = useUserStoreHook() const permissionStore = usePermissionStoreHook() NProgress.configure({ showSpinner: false }) router.beforeEach(async(to: RouteLocationNormalized, _: RouteLocationNormalized, next: any) => { NProgress.start() // 判断该用户是否登录 if (getToken()) { if (to.path === '/login') { // 如果登录,并准备进入 login 页面,则重定向到主页 next({ path: '/' }) NProgress.done() } else { // 检查用户是否已获得其权限角色 if (userStore.roles.length === 0) { try { if (rolesSettings.openRoles) { // 注意:角色必须是一个数组! 例如: ['admin'] 或 ['developer', 'editor'] await userStore.getInfo() // 获取接口返回的 roles const roles = userStore.roles // 根据角色生成可访问的 routes permissionStore.setRoutes(roles) } else { // 没有开启角色功能,则启用默认角色 userStore.setRoles(rolesSettings.defaultRoles) permissionStore.setRoutes(rolesSettings.defaultRoles) } // 动态地添加可访问的 routes permissionStore.dynamicRoutes.forEach((route) => { router.addRoute(route) }) // 确保添加路由已完成 // 设置 replace: true, 因此导航将不会留下历史记录 next({ ...to, replace: true }) } catch (err: any) { // 删除 token,并重定向到登录页面 userStore.resetToken() ElMessage.error(err.message || 'Has Error') next('/login') NProgress.done() } } else { next() } } } else { // 如果没有 token if (whiteList.indexOf(to.path) !== -1) { // 如果在免登录的白名单中,则直接进入 next() } else { // 其他没有访问权限的页面将被重定向到登录页面 next('/login') NProgress.done() } } }) router.afterEach(() => { NProgress.done() })