From 2ee36d982d368b5f35e31054b1ff2ba6a24373ac Mon Sep 17 00:00:00 2001
From: mortal <1320376126@qq.com>
Date: Thu, 27 Feb 2025 05:51:10 +0000
Subject: [PATCH] update src/permission.js.

Signed-off-by: mortal <1320376126@qq.com>
---
 src/permission.js | 111 ++++++++++++++++++++++++++--------------------
 1 file changed, 64 insertions(+), 47 deletions(-)

diff --git a/src/permission.js b/src/permission.js
index d723b61..20c209b 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -1,58 +1,75 @@
-import router from './router';
-import { getCache } from '@/utils/session';
-import getPageTitle from '@/utils/getPageTitle';
-import NProgress from 'nprogress'; // progress bar
-import 'nprogress/nprogress.css'; // progress bar style
-import { message } from 'ant-design-vue';
-import store from './store';
+import router from './router'; // 导入路由实例
+import { getCache } from '@/utils/session'; // 导入获取缓存的工具函数
+import getPageTitle from '@/utils/getPageTitle'; // 导入获取页面标题的工具函数
+import NProgress from 'nprogress'; // 导入进度条库
+import 'nprogress/nprogress.css'; // 导入进度条样式
+import { message } from 'ant-design-vue'; // 导入消息提示组件
+import store from './store'; // 导入 Vuex 存储
 
-NProgress.configure({ showSpinner: false }); // NProgress Configuration
+NProgress.configure({ showSpinner: false }); // 配置进度条，不显示旋转器
 
+/**
+ * 路由守卫，在路由跳转前执行
+ * @param {Object} to - 要跳转到的路由对象
+ * @param {Object} from - 当前路由对象
+ * @param {Function} next - 路由跳转的函数
+ */
 router.beforeEach(async (to, from, next) => {
-  NProgress.start();
-  document.title = getPageTitle(to.meta.title);
-  const isLogin = getCache('TOKEN');
-  if (to.path == '/login') {
-    next();
-    NProgress.done();
-  } else {
-    if (!isLogin) {
-      next('/login');
+    NProgress.start(); // 进度条开始
+    document.title = getPageTitle(to.meta.title); // 设置页面标题
+    const isLogin = getCache('TOKEN'); // 判断是否登录
+    if (to.path == '/login') {
+        next(); // 直接跳转到登录页
+        NProgress.done(); // 进度条结束
     } else {
-      const route = store.state.permission.routes;
-      if (route.length > 0) {
-        next();
-        NProgress.done();
-      } else {
-        // 关键点
-        const userInfo = store.state.user.accountInfo;
-        try {
-          const { roleIds } = userInfo;
-          console.log('permission-----roleId----', roleIds);
-          const accountRoute = await store.dispatch('permission/getRoute', roleIds);
-          // router.addRoutes(accountRoute);
-          console.log('最终的路由accountRoute---', accountRoute);
-          accountRoute.forEach(res => {
-            router.addRoute(res);
-          });
+        if (!isLogin) {
+            next('/login'); // 未登录则跳转到登录页
+        } else {
+            const route = store.state.permission.routes; // 获取路由列表
+            if (route.length > 0) {
+                next(); // 路由列表存在则直接跳转
+                NProgress.done(); // 进度条结束
+            } else {
+                // 关键点
+                const userInfo = store.state.user.accountInfo; // 获取用户信息
+                try {
+                    const { roleIds } = userInfo; // 从用户信息中获取角色ID
+                    console.log('permission-----roleId----', roleIds); // 打印角色ID
+                    // 调用 store 中的 action 获取与角色 ID 关联的路由
+                    const accountRoute = await store.dispatch('permission/getRoute', roleIds);
+                    // router.addRoutes(accountRoute);
+                    console.log('最终的路由accountRoute---', accountRoute);
+                    // 遍历路由数组，将每个路由添加到 Vue Router 实例中
+                    accountRoute.forEach(res => {
+                        router.addRoute(res);
+                    });
 
-          if (from.path == '/login') {
-            next(accountRoute[0].children[0].path);
-          } else {
-            next({ ...to, replace: true });
-          }
-          NProgress.done();
-        } catch (error) {
-          console.log(error);
-          message.error('获取用户信息失败');
-          next('/login');
-          NProgress.done();
+                    // 如果当前路由是从登录页跳转过来的
+                    if (from.path == '/login') {
+                        // 则跳转到第一个子路由的路径
+                        next(accountRoute[0].children[0].path);
+                    } else {
+                        // 否则，继续前往目标路由，并设置 replace 为 true，避免历史记录中出现重复的路由
+                        next({ ...to, replace: true });
+                    }
+                    // 加载进度条完成
+                    NProgress.done();
+                } catch (error) {
+                    // 捕获错误并打印到控制台
+                    console.log(error);
+                    // 弹出错误消息
+                    message.error('获取用户信息失败');
+                    // 重定向到登录页
+                    next('/login');
+                    // 加载进度条完成
+                    NProgress.done();
+                }
+            }
         }
-      }
-    }
   }
 });
 
+// 路由跳转完成后，调用 NProgress.done() 方法来结束进度条
 router.afterEach(() => {
-  NProgress.done();
+    NProgress.done();
 });
-- 
Gitee