From 18daf33f9d264c65ce85858006c6aacf47721cf0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=83=9D=E5=85=88=E7=91=9E?= <1490493387@qq.com>
Date: Mon, 11 Sep 2023 18:20:03 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20userStore=20=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81=E9=87=8D=E6=9E=84=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Former-commit-id: ef31b8420a48a91dd2449d62fb615941d528bf24
---
 src/api/user/types.ts                         |  7 +--
 src/directive/permission/index.ts             |  4 +-
 src/layout/components/NavBar/NavRight.vue     |  2 +-
 src/permission.ts                             |  4 +-
 src/store/modules/permission.ts               |  2 +-
 src/store/modules/user.ts                     | 47 +++++++------------
 src/views/dashboard/index.vue                 |  4 +-
 .../permission/components/SwitchRoles.vue     |  6 +--
 8 files changed, 32 insertions(+), 44 deletions(-)

diff --git a/src/api/user/types.ts b/src/api/user/types.ts
index 057be5f3..ba38dabf 100644
--- a/src/api/user/types.ts
+++ b/src/api/user/types.ts
@@ -2,9 +2,10 @@
  * 登录用户信息
  */
 export interface UserInfo {
-  userId: number;
-  nickname: string;
-  avatar: string;
+  userId?: number;
+  username?: string;
+  nickname?: string;
+  avatar?: string;
   roles: string[];
   perms: string[];
 }
diff --git a/src/directive/permission/index.ts b/src/directive/permission/index.ts
index 11d32068..2bd2c705 100644
--- a/src/directive/permission/index.ts
+++ b/src/directive/permission/index.ts
@@ -7,7 +7,7 @@ import { Directive, DirectiveBinding } from "vue";
 export const hasPerm: Directive = {
   mounted(el: HTMLElement, binding: DirectiveBinding) {
     // 「超级管理员」拥有所有的按钮权限
-    const { roles, perms } = useUserStoreHook();
+    const { roles, perms } = useUserStoreHook().user;
     if (roles.includes("ROOT")) {
       return true;
     }
@@ -40,7 +40,7 @@ export const hasRole: Directive = {
 
     if (value) {
       const requiredRoles = value; // DOM绑定需要的角色编码
-      const { roles } = useUserStoreHook();
+      const { roles } = useUserStoreHook().user;
       const hasRole = roles.some((perm) => {
         return requiredRoles.includes(perm);
       });
diff --git a/src/layout/components/NavBar/NavRight.vue b/src/layout/components/NavBar/NavRight.vue
index 8cc4ef5e..63cb1aa8 100644
--- a/src/layout/components/NavBar/NavRight.vue
+++ b/src/layout/components/NavBar/NavRight.vue
@@ -16,7 +16,7 @@
   <!-- 用户头像 -->
   <el-dropdown trigger="click">
     <div class="avatar-container">
-      <img :src="userStore.avatar + '?imageView2/1/w/80/h/80'" />
+      <img :src="userStore.user.avatar + '?imageView2/1/w/80/h/80'" />
       <i-ep-caret-bottom class="w-3 h-3" />
     </div>
     <template #dropdown>
diff --git a/src/permission.ts b/src/permission.ts
index f8b8c811..8512cb8e 100644
--- a/src/permission.ts
+++ b/src/permission.ts
@@ -22,7 +22,7 @@ router.beforeEach(async (to, from, next) => {
       NProgress.done();
     } else {
       const userStore = useUserStoreHook();
-      const hasRoles = userStore.roles && userStore.roles.length > 0;
+      const hasRoles = userStore.user.roles && userStore.user.roles.length > 0;
       if (hasRoles) {
         // 未匹配到任何路由，跳转404
         if (to.matched.length === 0) {
@@ -40,7 +40,7 @@ router.beforeEach(async (to, from, next) => {
           next({ ...to, replace: true });
         } catch (error) {
           // 移除 token 并跳转登录页
-          await userStore.resetToken();
+          await userStore.resetStore();
           next(`/login?redirect=${to.path}`);
           NProgress.done();
         }
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index 63e7c973..4ccc73fb 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -1,4 +1,4 @@
-import { RouteRecordRaw, useRouter } from "vue-router";
+import { RouteRecordRaw } from "vue-router";
 import { defineStore } from "pinia";
 import { constantRoutes } from "@/router";
 import { store } from "@/store";
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index d30fee09..d3284879 100644
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -11,16 +11,15 @@ import { UserInfo } from "@/api/user/types";
 import { useStorage } from "@vueuse/core";
 
 export const useUserStore = defineStore("user", () => {
-  // state
-  const userId = ref();
+  const user: UserInfo = {
+    roles: [],
+    perms: [],
+  };
+
   const token = useStorage("accessToken", "");
-  const nickname = ref("");
-  const avatar = ref("");
-  const roles = ref<Array<string>>([]); // 用户角色编码集合 → 判断路由权限
-  const perms = ref<Array<string>>([]); // 用户权限编码集合 → 判断按钮权限
 
   /**
-   * 登录调用
+   * 登录
    *
    * @param {LoginData}
    * @returns
@@ -45,16 +44,14 @@ export const useUserStore = defineStore("user", () => {
       getUserInfo()
         .then(({ data }) => {
           if (!data) {
-            return reject("Verification failed, please Login again.");
+            reject("Verification failed, please Login again.");
+            return;
           }
           if (!data.roles || data.roles.length <= 0) {
             reject("getUserInfo: roles must be a non-null array!");
+            return;
           }
-          userId.value = data.userId;
-          nickname.value = data.nickname;
-          avatar.value = data.avatar;
-          roles.value = data.roles;
-          perms.value = data.perms;
+          Object.assign(user, { ...data });
           resolve(data);
         })
         .catch((error) => {
@@ -68,8 +65,7 @@ export const useUserStore = defineStore("user", () => {
     return new Promise<void>((resolve, reject) => {
       logoutApi()
         .then(() => {
-          resetRouter();
-          resetToken();
+          resetStore();
           location.reload(); // 清空路由
           resolve();
         })
@@ -79,28 +75,19 @@ export const useUserStore = defineStore("user", () => {
     });
   }
 
-  // 重置
-  function resetToken() {
+  /** 清空缓存 */
+  function resetStore() {
+    resetRouter();
     token.value = "";
-    nickname.value = "";
-    avatar.value = "";
-    roles.value = [];
-    perms.value = [];
+    Object.assign(user, { roles: [], perms: [] });
   }
   return {
     token,
-    nickname,
-    avatar,
-    roles,
-    perms,
+    user,
     login,
     getInfo,
     logout,
-    resetToken,
-    /**
-     * 当前登录用户ID
-     */
-    userId,
+    resetStore,
   };
 });
 
diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 53884457..4e2e6d13 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -74,10 +74,10 @@ orderCount.value = 2000;
           <div class="flex items-center">
             <img
               class="user-avatar"
-              :src="userStore.avatar + '?imageView2/1/w/80/h/80'"
+              :src="userStore.user.avatar + '?imageView2/1/w/80/h/80'"
             />
             <span class="ml-[10px] text-[16px]">
-              {{ userStore.nickname }}
+              {{ userStore.user.nickname }}
             </span>
           </div>
 
diff --git a/src/views/demo/permission/components/SwitchRoles.vue b/src/views/demo/permission/components/SwitchRoles.vue
index 0f7789dd..a2b3c186 100644
--- a/src/views/demo/permission/components/SwitchRoles.vue
+++ b/src/views/demo/permission/components/SwitchRoles.vue
@@ -15,12 +15,12 @@ import { storeToRefs } from "pinia";
 
 const emit = defineEmits(["change"]);
 const store = storeToRefs(useUserStoreHook());
-const { roles } = store;
+const { roles } = store.user.value;
 
 const switchRoles = computed({
-  get: () => roles.value[0],
+  get: () => roles[0],
   set: (val) => {
-    roles.value = [val];
+    Object.assign(roles, [val]);
     emit("change");
   },
 });