From 5c84761998097c9382015302a0c51ebfeea60a53 Mon Sep 17 00:00:00 2001
From: haoxr <1490493387@qq.com>
Date: Wed, 8 Feb 2023 00:59:07 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BB=A3=E7=A0=81=E5=92=8C?=
 =?UTF-8?q?=E6=B3=A8=E9=87=8A=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: c6c783446f561c1cfa32270fba019ff24dcb3beb
---
 src/store/modules/permission.ts | 50 ++++++++++++++++++++++-----------
 src/store/modules/user.ts       |  7 ++++-
 2 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index 5ec8cb8b..68dd4b1a 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -5,11 +5,18 @@ import { store } from '@/store';
 import { listRoutes } from '@/api/menu';
 
 const modules = import.meta.glob('../../views/**/**.vue');
-export const Layout = () => import('@/layout/index.vue');
+const Layout = () => import('@/layout/index.vue');
 
+/**
+ * Use meta.role to determine if the current user has permission
+ *
+ * @param roles 用户角色集合
+ * @param route 路由
+ * @returns
+ */
 const hasPermission = (roles: string[], route: RouteRecordRaw) => {
   if (route.meta && route.meta.roles) {
-    // 默认超级管理员角色拥有所有权限，忽略校验
+    // 角色【超级管理员】拥有所有权限，忽略校验
     if (roles.includes('ROOT')) {
       return true;
     }
@@ -22,29 +29,41 @@ const hasPermission = (roles: string[], route: RouteRecordRaw) => {
   return false;
 };
 
+/**
+ * 递归过滤有权限的异步(动态)路由
+ *
+ * @param routes 接口返回的异步(动态)路由
+ * @param roles 用户角色集合
+ * @returns 返回用户有权限的异步(动态)路由
+ */
 const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
-  const res: RouteRecordRaw[] = [];
+  const asyncRoutes: RouteRecordRaw[] = [];
+
   routes.forEach(route => {
-    const tmp = { ...route } as any;
-    if (hasPermission(roles, tmp)) {
-      if (tmp.component == 'Layout') {
-        tmp.component = Layout;
+    const tmpRoute = { ...route }; // ES6扩展运算符复制新对象
+
+    // 判断用户(角色)是否有该路由的访问权限
+    if (hasPermission(roles, tmpRoute)) {
+      if (tmpRoute.component?.toString() == 'Layout') {
+        tmpRoute.component = Layout;
       } else {
-        const component = modules[`../../views/${tmp.component}.vue`] as any;
+        const component = modules[`../../views/${tmpRoute.component}.vue`];
         if (component) {
-          tmp.component = component;
+          tmpRoute.component = component;
         } else {
-          tmp.component = modules[`../../views/error-page/404.vue`];
+          tmpRoute.component = modules[`../../views/error-page/404.vue`];
         }
       }
-      res.push(tmp);
 
-      if (tmp.children) {
-        tmp.children = filterAsyncRoutes(tmp.children, roles);
+      if (tmpRoute.children) {
+        tmpRoute.children = filterAsyncRoutes(tmpRoute.children, roles);
       }
+
+      asyncRoutes.push(tmpRoute);
     }
   });
-  return res;
+
+  return asyncRoutes;
 };
 
 // setup
@@ -60,8 +79,7 @@ export const usePermissionStore = defineStore('permission', () => {
   function generateRoutes(roles: string[]) {
     return new Promise<RouteRecordRaw[]>((resolve, reject) => {
       listRoutes()
-        .then(response => {
-          const asyncRoutes = response.data;
+        .then(({ data: asyncRoutes }) => {
           const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles);
           setRoutes(accessedRoutes);
           resolve(accessedRoutes);
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 0eff5a6d..4c0619c3 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -19,7 +19,12 @@ export const useUserStore = defineStore('user', () => {
 
   // actions
 
-  // 登录
+  /**
+   * 登录
+   *
+   * @param loginData
+   * @returns
+   */
   function login(loginData: LoginType) {
     return new Promise<void>((resolve, reject) => {
       loginApi(loginData)