feat: 添加pinia持久化

.env

@@ -5,24 +5,23 @@
 VITE_TITLE = 绝弹管理系统
 # 网站副标题
 VITE_SUBTITLE = 快速开发web应用的模板工具
-# API接口前缀
+# API接口前缀：参见 axios 的 baseURL
 VITE_API_PREFIX = http://127.0.0.1:3030/
-# API文档地址 备注：需为符合 OPENAPI 规范的json文件
+# API文档地址：需返回符合 OPENAPI 规范的json内容
 VITE_API_SWAGGER = http://127.0.0.1:3030/openapi.json
 
 # =====================================================================================
 # 开发设置
 # =====================================================================================
-# API代理地址(开发环境)
+# 主机
-VITE_API_PROXY_URL = /api
-# 端口号(开发环境)
-VITE_PORT = 3020
-# 主机地址(开发环境)
 VITE_HOST = 0.0.0.0
+# 端口
+VITE_PORT = 3020
+# API代理地址
+VITE_PROXY = /api
 
 # =====================================================================================
 # 构建设置
 # =====================================================================================
-# 构建时加载的文件后缀.
+# 构建时加载的文件后缀: 设为mp时会优先加载index.mp.vue文件，否则回退至index.vue文件
-# 例如：设置为todo则会首先尝试加载index.todo.vue文件，不存在时再加载index.vue文件
 VITE_EXTENSION = todo

package.json

@@ -33,7 +33,7 @@
     "lodash-es": "^4.17.21",
     "nprogress": "^0.2.0",
     "numeral": "^2.0.6",
-    "pinia": "^2.0.33",
+    "pinia": "^2.1.6",
     "pinia-plugin-persistedstate": "^3.2.0",
     "plop": "^3.1.2",
     "release-it": "^15.10.1",

pnpm-lock.yaml

@@ -44,11 +44,11 @@ devDependencies:
     specifier: ^2.0.6
     version: 2.0.6
   pinia:
-    specifier: ^2.0.33
+    specifier: ^2.1.6
-    version: 2.1.4(typescript@4.9.5)(vue@3.3.4)
+    version: 2.1.6(typescript@4.9.5)(vue@3.3.4)
   pinia-plugin-persistedstate:
     specifier: ^3.2.0
-    version: 3.2.0(pinia@2.1.4)
+    version: 3.2.0(pinia@2.1.6)
   plop:
     specifier: ^3.1.2
     version: 3.1.2
@@ -81,7 +81,7 @@ devDependencies:
     version: 4.4.2(less@4.1.3)
   vite-plugin-mock:
     specifier: ^3.0.0
-    version: 3.0.0(esbuild@0.18.11)(mockjs@1.1.0)(vite@4.4.2)
+    version: 3.0.0(vite@4.4.2)
   vite-plugin-pages:
     specifier: ^0.28.0
     version: 0.28.0(vite@4.4.2)
@@ -90,7 +90,7 @@ devDependencies:
     version: 2.0.0(vite@4.4.2)
   vitepress:
     specifier: 1.0.0-beta.1
-    version: 1.0.0-beta.1(@algolia/client-search@4.18.0)(axios@1.4.0)(less@4.1.3)(nprogress@0.2.0)(search-insights@2.7.0)
+    version: 1.0.0-beta.1(axios@1.4.0)(less@4.1.3)(nprogress@0.2.0)
   vue:
     specifier: ^3.3.4
     version: 3.3.4
@@ -103,47 +103,44 @@ devDependencies:
 
 packages:
 
-  /@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.18.0)(algoliasearch@4.18.0)(search-insights@2.7.0):
+  /@algolia/autocomplete-core@1.9.3(algoliasearch@4.18.0):
     resolution: {integrity: sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==}
     dependencies:
-      '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(@algolia/client-search@4.18.0)(algoliasearch@4.18.0)(search-insights@2.7.0)
+      '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(algoliasearch@4.18.0)
-      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.18.0)(algoliasearch@4.18.0)
+      '@algolia/autocomplete-shared': 1.9.3(algoliasearch@4.18.0)
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
       - search-insights
     dev: true
 
-  /@algolia/autocomplete-plugin-algolia-insights@1.9.3(@algolia/client-search@4.18.0)(algoliasearch@4.18.0)(search-insights@2.7.0):
+  /@algolia/autocomplete-plugin-algolia-insights@1.9.3(algoliasearch@4.18.0):
     resolution: {integrity: sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==}
     peerDependencies:
       search-insights: '>= 1 < 3'
     dependencies:
-      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.18.0)(algoliasearch@4.18.0)
+      '@algolia/autocomplete-shared': 1.9.3(algoliasearch@4.18.0)
-      search-insights: 2.7.0
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
     dev: true
 
-  /@algolia/autocomplete-preset-algolia@1.9.3(@algolia/client-search@4.18.0)(algoliasearch@4.18.0):
+  /@algolia/autocomplete-preset-algolia@1.9.3(algoliasearch@4.18.0):
     resolution: {integrity: sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==}
     peerDependencies:
       '@algolia/client-search': '>= 4.9.1 < 6'
       algoliasearch: '>= 4.9.1 < 6'
     dependencies:
-      '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.18.0)(algoliasearch@4.18.0)
+      '@algolia/autocomplete-shared': 1.9.3(algoliasearch@4.18.0)
-      '@algolia/client-search': 4.18.0
       algoliasearch: 4.18.0
     dev: true
 
-  /@algolia/autocomplete-shared@1.9.3(@algolia/client-search@4.18.0)(algoliasearch@4.18.0):
+  /@algolia/autocomplete-shared@1.9.3(algoliasearch@4.18.0):
     resolution: {integrity: sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==}
     peerDependencies:
       '@algolia/client-search': '>= 4.9.1 < 6'
       algoliasearch: '>= 4.9.1 < 6'
     dependencies:
-      '@algolia/client-search': 4.18.0
       algoliasearch: 4.18.0
     dev: true
 
@@ -594,10 +591,10 @@ packages:
     resolution: {integrity: sha512-2Pu9HDg/uP/IT10rbQ+4OrTQuxIWdKVUEdcw9/w7kZJv9NeHS6skJx1xuRiFyoGKwAzcHXnLp7csE99sj+O1YA==}
     dev: true
 
-  /@docsearch/js@3.5.1(@algolia/client-search@4.18.0)(search-insights@2.7.0):
+  /@docsearch/js@3.5.1:
     resolution: {integrity: sha512-EXi8de5njxgP6TV3N9ytnGRLG9zmBNTEZjR4VzwPcpPLbZxxTLG2gaFyJyKiFVQxHW/DPlMrDJA3qoRRGEkgZw==}
     dependencies:
-      '@docsearch/react': 3.5.1(@algolia/client-search@4.18.0)(search-insights@2.7.0)
+      '@docsearch/react': 3.5.1
       preact: 10.15.1
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -607,7 +604,7 @@ packages:
       - search-insights
     dev: true
 
-  /@docsearch/react@3.5.1(@algolia/client-search@4.18.0)(search-insights@2.7.0):
+  /@docsearch/react@3.5.1:
     resolution: {integrity: sha512-t5mEODdLzZq4PTFAm/dvqcvZFdPDMdfPE5rJS5SC8OUq9mPzxEy6b+9THIqNM9P0ocCb4UC5jqBrxKclnuIbzQ==}
     peerDependencies:
       '@types/react': '>= 16.8.0 < 19.0.0'
@@ -621,8 +618,8 @@ packages:
       react-dom:
         optional: true
     dependencies:
-      '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.18.0)(algoliasearch@4.18.0)(search-insights@2.7.0)
+      '@algolia/autocomplete-core': 1.9.3(algoliasearch@4.18.0)
-      '@algolia/autocomplete-preset-algolia': 1.9.3(@algolia/client-search@4.18.0)(algoliasearch@4.18.0)
+      '@algolia/autocomplete-preset-algolia': 1.9.3(algoliasearch@4.18.0)
       '@docsearch/css': 3.5.1
       algoliasearch: 4.18.0
     transitivePeerDependencies:
@@ -2317,13 +2314,12 @@ packages:
       run-applescript: 5.0.0
     dev: true
 
-  /bundle-require@4.0.1(esbuild@0.18.11):
+  /bundle-require@4.0.1:
     resolution: {integrity: sha512-9NQkRHlNdNpDBGmLpngF3EFDcwodhMUuLz9PaWYciVcQF9SE4LFjM2DB/xV1Li5JiuDMv7ZUWuC3rGbqR0MAXQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     peerDependencies:
       esbuild: '>=0.17'
     dependencies:
-      esbuild: 0.18.11
       load-tsconfig: 0.2.5
     dev: true
 
@@ -2604,11 +2600,6 @@ packages:
       delayed-stream: 1.0.0
     dev: true
 
-  /commander@11.0.0:
-    resolution: {integrity: sha512-9HMlXtt/BNoYr8ooyjjNRdIilOTkVJXB+GhxMTtOKwk0R4j4lS4NpjuqmRxroBfnfTSHQIHQB7wryHhXarNjmQ==}
-    engines: {node: '>=16'}
-    dev: true
-
   /compare-func@2.0.0:
     resolution: {integrity: sha512-zHig5N+tPWARooBnb0Zx1MFcdfpyJrfTJ3Y5L+IFvUm8rM74hHz66z0gw0x4tijh5CorKkKUCnW82R2vmpeCRA==}
     dependencies:
@@ -5144,13 +5135,6 @@ packages:
       ufo: 1.1.0
     dev: true
 
-  /mockjs@1.1.0:
-    resolution: {integrity: sha512-eQsKcWzIaZzEZ07NuEyO4Nw65g0hdWAyurVol1IPl1gahRwY+svqzfgfey8U8dahLwG44d6/RwEzuK52rSa/JQ==}
-    hasBin: true
-    dependencies:
-      commander: 11.0.0
-    dev: true
-
   /modify-values@1.0.1:
     resolution: {integrity: sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==}
     engines: {node: '>=0.10.0'}
@@ -5836,16 +5820,16 @@ packages:
     dev: true
     optional: true
 
-  /pinia-plugin-persistedstate@3.2.0(pinia@2.1.4):
+  /pinia-plugin-persistedstate@3.2.0(pinia@2.1.6):
     resolution: {integrity: sha512-tZbNGf2vjAQcIm7alK40sE51Qu/m9oWr+rEgNm/2AWr1huFxj72CjvpQcIQzMknDBJEkQznCLAGtJTIcLKrKdw==}
     peerDependencies:
       pinia: ^2.0.0
     dependencies:
-      pinia: 2.1.4(typescript@4.9.5)(vue@3.3.4)
+      pinia: 2.1.6(typescript@4.9.5)(vue@3.3.4)
     dev: true
 
-  /pinia@2.1.4(typescript@4.9.5)(vue@3.3.4):
+  /pinia@2.1.6(typescript@4.9.5)(vue@3.3.4):
-    resolution: {integrity: sha512-vYlnDu+Y/FXxv1ABo1vhjC+IbqvzUdiUC3sfDRrRyY2CQSrqqaa+iiHmqtARFxJVqWQMCJfXx1PBvFs9aJVLXQ==}
+    resolution: {integrity: sha512-bIU6QuE5qZviMmct5XwCesXelb5VavdOWKWaB17ggk++NUwQWWbP5YnsONTk3b752QkW9sACiR81rorpeOMSvQ==}
     peerDependencies:
       '@vue/composition-api': ^1.4.0
       typescript: '>=4.4.4'
@@ -6304,11 +6288,6 @@ packages:
     resolution: {integrity: sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==}
     dev: true
 
-  /search-insights@2.7.0:
-    resolution: {integrity: sha512-GLbVaGgzYEKMvuJbHRhLi1qoBFnjXZGZ6l4LxOYPCp4lI2jDRB3jPU9/XNhMwv6kvnA9slTreq6pvK+b3o3aqg==}
-    engines: {node: '>=8.16.0'}
-    dev: true
-
   /semver-diff@4.0.0:
     resolution: {integrity: sha512-0Ju4+6A8iOnpL/Thra7dZsSlOHYAHIeMxfhWQRI1/VLcT3WDBZKKtQt/QkBOsiIN9ZpuvHE6cGZ0x4glCMmfiA==}
     engines: {node: '>=12'}
@@ -7187,7 +7166,7 @@ packages:
       spdx-expression-parse: 3.0.1
     dev: true
 
-  /vite-plugin-mock@3.0.0(esbuild@0.18.11)(mockjs@1.1.0)(vite@4.4.2):
+  /vite-plugin-mock@3.0.0(vite@4.4.2):
     resolution: {integrity: sha512-Ibwlga2CSgkoFHFtPW3T/l0fwsGVz9Ss5i7HauBQDyDFfMKgbQXh9wKDLksLZHyai9rkDanxJtIcxbD0bUHCfw==}
     engines: {node: '>=16.0.0'}
     peerDependencies:
@@ -7195,12 +7174,11 @@ packages:
       vite: '>=4.0.0'
     dependencies:
       '@types/mockjs': 1.0.7
-      bundle-require: 4.0.1(esbuild@0.18.11)
+      bundle-require: 4.0.1
       chokidar: 3.5.3
       connect: 3.7.0
       debug: 4.3.4
       fast-glob: 3.2.12
-      mockjs: 1.1.0
       path-to-regexp: 6.2.1
       picocolors: 1.0.0
       vite: 4.4.2(less@4.1.3)
@@ -7283,12 +7261,12 @@ packages:
       fsevents: 2.3.2
     dev: true
 
-  /vitepress@1.0.0-beta.1(@algolia/client-search@4.18.0)(axios@1.4.0)(less@4.1.3)(nprogress@0.2.0)(search-insights@2.7.0):
+  /vitepress@1.0.0-beta.1(axios@1.4.0)(less@4.1.3)(nprogress@0.2.0):
     resolution: {integrity: sha512-V2yyCwQ+v9fh7rbnGDLp8M7vHa9sLElexXf/JHtBOsOwv7ed9wt1QI4WUagYgKR3TeoJT9v2s6f0UaQSne0EvQ==}
     hasBin: true
     dependencies:
       '@docsearch/css': 3.5.1
-      '@docsearch/js': 3.5.1(@algolia/client-search@4.18.0)(search-insights@2.7.0)
+      '@docsearch/js': 3.5.1
       '@vitejs/plugin-vue': 4.2.3(vite@4.4.2)(vue@3.3.4)
       '@vue/devtools-api': 6.5.0
       '@vueuse/core': 10.2.1(vue@3.3.4)

src/api/instance/api.ts

@@ -1,6 +1,6 @@
+import { IToastOptions, toast } from "@/components";
+import { store, useUserStore } from "@/store";
 import { Api } from "../service/Api";
-import { toast, IToastOptions } from "@/components";
-import { useUserStore, store } from "@/store";
 
 const userStore = useUserStore(store);
 

src/api/service/Api.ts

@@ -164,6 +164,8 @@ export interface AuthUserDto {
 }
 
 export interface LoginedUserVo {
+  /** 用户ID */
+  id: number;
   /**
    * 访问令牌
    * @example "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjIsInVzZXJuYW1lIjoianVldGFuIiwiaWF0IjoxNjkxMTM5MjI3LCJleHAiOjE2OTExOTkyMjd9.6z7f-xfsHABbsyg401o2boKeqNQ1epPDYfEdavIcfYc"

src/pages/_app/index.vue

@@ -22,10 +22,10 @@
         <a-dropdown>
           <span class="cursor-pointer">
             <a-avatar :size="28">
-              <img :src="userStore.avatar" :alt="userStore.name">
+              <img :src="userStore.avatar" :alt="userStore.nickname">
             </a-avatar>
             <span class="mx-2">
-              {{ userStore.name }}
+              {{ userStore.nickname }}
             </span>
             <i class="icon-park-outline-down"></i>
           </span>
@@ -115,6 +115,7 @@ const userButtons = [
     icon: "icon-park-outline-logout",
     text: "退出登录",
     onClick: async () => {
+      userStore.clearUser()
       Message.loading({
         content: '提示: 正在退出，请稍后...',
         duration: 2000,

src/pages/_login/index.vue

@@ -13,7 +13,7 @@
     </div>
     <div class="flex items-center justify-center w-full overflow-hidden">
       <div
-        class="login-box w-[920px] h-[560px] relative mx-8 grid md:grid-cols-2 rounded overflow-hidden border border-blue-100"
+        class="login-box w-[960px] h-[560px] relative mx-8 grid md:grid-cols-2 rounded overflow-hidden border border-blue-100"
       >
         <div class="relative hidden md:block w-full h-full overflow-hidden bg-[#09f] px-4">
           <img src="@/assets/td.svg" :alt="appStore.title" class="w-full h-full select-none" />
@@ -58,13 +58,13 @@
 import { api } from "@/api";
 import { dayjs } from "@/plugins";
 import { useAppStore, useUserStore } from "@/store";
-import { FieldRule, Form, Modal } from "@arco-design/web-vue";
+import { FieldRule, Form, Message, Modal } from "@arco-design/web-vue";
 import { reactive } from "vue";
 
 const meridiem = dayjs.localeData().meridiem(dayjs().hour(), dayjs().minute());
 const appStore = useAppStore();
 const userStore = useUserStore();
-const model = reactive({ username: "admin", password: "admin" });
+const model = reactive({ username: "juetan", password: "juetan" });
 const router = useRouter();
 const loading = ref(false);
 const formRef = ref<InstanceType<typeof Form>>();
@@ -102,9 +102,14 @@ const onSubmitClick = async () => {
     loading.value = true;
     const res = await api.auth.login(model);
     userStore.setUser(res.data.data);
+    userStore.username = res.data.data.username;
+    Message.success(`欢迎回来，${res.data.data.username}!`)
     router.push({ path: "/" });
-  } catch {
+  } catch (error: any) {
-    console.log(1);
+    const message = error?.response?.data?.message;
+    if (message) {
+      Message.warning(`提示：${message}`);
+    }
   } finally {
     loading.value = false;
   }

src/pages/permission/index.vue

@@ -52,7 +52,18 @@ const table = useTable({
       ],
     },
   ],
-  common: {
+  search: {
+    items: [
+      {
+        field: "name",
+        label: "权限名称",
+        type: "input",
+        required: false,
+      },
+    ],
+  },
+  create: {
+    title: "添加权限",
     items: [
       {
         field: "name",
@@ -94,24 +105,12 @@ const table = useTable({
     formProps: {
       layout: "vertical",
     },
-  },
-  search: {
-    items: [
-      {
-        field: "name",
-        label: "权限名称",
-        type: "input",
-        required: false,
-      },
-    ],
-  },
-  create: {
-    title: "添加权限",
     submit: ({ model }) => {
       return api.permission.addPermission(model as any);
     },
   },
   modify: {
+    extend: true,
     title: "修改权限",
     submit: ({ model }) => {
       return api.permission.updatePermission(model.id, model);

src/pages/role/index.vue

@@ -99,6 +99,7 @@ const table = useTable({
     },
   },
   modify: {
+    extend: true,
     title: "修改角色",
     submit: ({ model }) => {
       return api.role.updateRole(model.id, model);

src/router/guards/guard-auth.ts

@@ -1,18 +1,14 @@
-import { NavigationGuardWithThis } from "vue-router";
 import { store, useUserStore } from "@/store";
 import { Message } from "@arco-design/web-vue";
+import { NavigationGuardWithThis } from "vue-router";
 
-const userStore = useUserStore(store);
+const whitelist = ["/404"];
+const signoutlist = ["/login"];
 
-/**
+export const authGuard: NavigationGuardWithThis<undefined> = async function (to, from, next) {
- * 权限守卫
+  // 放在外面，pinia-plugin-peristedstate 插件会失效
- * @description 校验用户是否有路由的访问权限
+  const userStore = useUserStore(store);
- */
+  if (to.meta?.auth === false) {
-export function useAuthGuard() {
-  const whitelist = ["/404"];
-  const signoutlist = ["/login"];
-  const authGuard: NavigationGuardWithThis<undefined> = async function (to, from, next) {
-    if (to.meta.auth === false) {
     return next();
   }
   if (whitelist.includes(to.fullPath)) {
@@ -25,10 +21,8 @@ export function useAuthGuard() {
     }
     return next();
   }
-    if (!userStore.id) {
+  if (!userStore.accessToken) {
     return next("/login");
   }
   next();
-  };
+};
-  return authGuard;
-}

src/router/guards/guard-nprogress.ts

@@ -1,17 +1,16 @@
-import { NavigationGuardWithThis } from "vue-router";
 import { NProgress } from "@/plugins";
+import { NavigationGuardWithThis, NavigationHookAfter } from "vue-router";
 
-/**
+const before: NavigationGuardWithThis<undefined> = function (to, from, next) {
- * 进度条守卫
- * @description 在路由跳转时显示进度条
- */
-export const useNprogressGuard = () => {
-  const before: NavigationGuardWithThis<undefined> = function (to, from, next) {
   NProgress.start();
   next();
-  };
+};
-  const after: NavigationGuardWithThis<undefined> = function (to, from, next) {
+
-    NProgress.done();
+const after: NavigationHookAfter = function () {
-  };
+  NProgress.done();
-  return { before, after };
+};
+
+export const nprogressGuard = {
+  before,
+  after,
 };

src/router/guards/guard-title.ts

@@ -1,15 +1,10 @@
+import { store, useAppStore } from "@/store";
 import { NavigationGuardWithThis } from "vue-router";
 
-/**
+export const titleGuard: NavigationGuardWithThis<undefined> = function (to, from, next) {
- * 标题首位
+  const appStore = useAppStore(store);
- * @description 路由跳转后更新页面标题
+  const title = to.meta.title || appStore.title;
- */
+  const subtitle = appStore.subtitle;
-export const useTitleGuard = () => {
-  const titleGuard: NavigationGuardWithThis<undefined> = function (to, from, next) {
-    const title = to.meta.title || import.meta.env.VITE_APP_TITLE;
-    const subtitle = import.meta.env.VITE_APP_SUBTITLE;
   document.title = `${title} | ${subtitle}`;
   next();
-  };
-  return titleGuard;
 };

src/router/menus/index.ts

@@ -111,8 +111,9 @@ function sort<T extends { children?: T[]; [key: string]: any }>(
  * @returns
  */
 function transformToMenuItems(routes: RouteRecordRaw[]) {
-  const items = sort(listToTree(routesToItems(routes)));
+  const menus = routesToItems(routes);
-  return items;
+  const tree = listToTree(menus);
+  return sort(tree);
 }
 
 /**
@@ -122,3 +123,4 @@ const menus = transformToMenuItems(appRoutes);
 
 export { menus };
 export type { MenuItem };
+

src/router/router/index.ts

@@ -1,14 +1,10 @@
 import { createRouter, createWebHashHistory } from "vue-router";
+import { authGuard } from "../guards/guard-auth";
+import { nprogressGuard } from "../guards/guard-nprogress";
+import { titleGuard } from "../guards/guard-title";
 import { routes } from "../routes";
-import { useAuthGuard } from "../guards/guard-auth";
-import { useNprogressGuard } from "../guards/guard-nprogress";
-import { useTitleGuard } from "../guards/guard-title";
 
-const nprogressGuard = useNprogressGuard();
+export const router = createRouter({
-const titleGuard = useTitleGuard();
-const authGuard = useAuthGuard();
-
-const router = createRouter({
   history: createWebHashHistory(),
   routes: [
     {
@@ -20,8 +16,6 @@ const router = createRouter({
 });
 
 router.beforeEach(nprogressGuard.before);
-router.beforeEach(nprogressGuard.after);
+router.afterEach(nprogressGuard.after);
 router.beforeEach(titleGuard);
 router.beforeEach(authGuard);
-
-export { router };

src/store/index.ts

@@ -1,3 +1,4 @@
 export * from "./app";
 export * from "./store";
 export * from "./user";
+

src/store/user/index.ts

@@ -10,10 +10,14 @@ export const useUserStore = defineStore({
        */
       id: 0,
       /**
-       * 用户名称
+       * 登录用户名
        */
-      username: "绝弹",
+      username: "juetan",
       /**
+       * 用户昵称
+       */
+      nickname: "绝弹",
+      /** `   
        * 用户头像地址
        */
       avatar: "https://github.com/juetan.png",
@@ -24,7 +28,7 @@ export const useUserStore = defineStore({
       /**
        * 刷新令牌
        */
-      refreshToken: "",
+      refreshToken: undefined,
     };
   },
   actions: {
@@ -38,15 +42,15 @@ export const useUserStore = defineStore({
      * 清除用户信息
      */
     clearUser() {
-      this.username = "";
+      this.$reset()
-      this.avatar = "";
-      this.accessToken = "";
     },
     /**
      * 设置用户信息
      */
     setUser(user: LoginedUserVo) {
+      this.id = user.id;
       this.username = user.username;
+      this.nickname = user.nickname;
       this.avatar = user.avatar;
       this.accessToken = user.token;
     },