From dbe6a3d6323cca4a5b923b1decb27976cb652195 Mon Sep 17 00:00:00 2001 From: Litrix2 Date: Sun, 14 Apr 2024 19:44:24 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=E6=B7=BB=E5=8A=A0=E7=94=A8?= =?UTF-8?q?=E6=88=B7=E4=BF=A1=E6=81=AF=E5=8A=A0=E8=BD=BD=E5=8A=A8=E7=94=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components.d.ts | 2 +- src/App.vue | 44 +++++++++++++++++++++++--------------------- src/router/index.ts | 41 +++++++++++++++++++++++------------------ src/stores/user.ts | 6 +++--- 4 files changed, 50 insertions(+), 43 deletions(-) diff --git a/components.d.ts b/components.d.ts index b672c07..e9e012a 100644 --- a/components.d.ts +++ b/components.d.ts @@ -24,7 +24,7 @@ declare module 'vue' { ElTabs: typeof import('element-plus/es')['ElTabs'] Game2048: typeof import('./src/components/Game2048.vue')['default'] IconCsLock: typeof import('~icons/cs/lock')['default'] - IconEpAvatar: typeof import('~icons/ep/avatar')['default'] + IconEpLoading: typeof import('~icons/ep/loading')['default'] IconEpUserFilled: typeof import('~icons/ep/user-filled')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] diff --git a/src/App.vue b/src/App.vue index 87b6f20..314a4ad 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,25 +3,28 @@
社团展示系统
-
- {{ userStore.userInfo.name }} -
- - - - - - 登录 - + +
@@ -149,7 +152,7 @@ import { Avatar, CloseBold } from '@element-plus/icons-vue'; import { AxiosError } from 'axios'; import { type FormInstance, type FormRules, ElMessage } from 'element-plus'; import { partial, pick } from 'lodash-es'; -import { onMounted, reactive, ref, watch } from 'vue'; +import { onMounted, reactive, ref, watch, onBeforeMount } from 'vue'; import { RouterView, useRoute, useRouter } from 'vue-router'; import { z } from 'zod'; const router = useRouter(); @@ -244,7 +247,6 @@ async function submitLoginForm() { succeed = await login(); } finally { if (succeed) { - // await timeout(1000); window.location.reload(); } else { logining.value = false; diff --git a/src/router/index.ts b/src/router/index.ts index 13279d3..9c84ba3 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,10 +1,10 @@ import axiosInstance from '@/api'; import { userInfoResponseSchema, type Route } from '@/schemas'; import { useUserStore } from '@/stores'; -import { errorMessage } from '@/utils'; +import { errorMessage, timeout } from '@/utils'; import { ElMessage } from 'element-plus'; import { type Component } from 'vue'; -import { createRouter, createWebHashHistory, type RouteRecordRaw } from 'vue-router'; +import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'; const routes: RouteRecordRaw[] = [ { path: '/', @@ -16,7 +16,7 @@ const routes: RouteRecordRaw[] = [ } ]; const router = createRouter({ - history: createWebHashHistory(), + history: createWebHistory(), routes: routes }); const componentMap: Record Promise> = { @@ -43,24 +43,29 @@ function getAvailableRoutes(routeResponse: Route[]) { } router.beforeEach(async (to) => { const userStore = useUserStore(); - console.log(userStore.userInfo); + console.log(2, userStore.userInfo); // await timeout(1000); - if (!userStore.isInitialized) { - const userInfoResponse = userInfoResponseSchema.parse( - (await axiosInstance.get('/api/user/info')).data - ); - console.log(userInfoResponse); - if (userInfoResponse.type === 'error') { - ElMessage.error( - errorMessage('获取用户信息失败', userInfoResponse.code, userInfoResponse.msg) + console.log(userStore.initialized); + if (!userStore.initialized) { + try { + const userInfoResponse = userInfoResponseSchema.parse( + (await axiosInstance.get('/api/user/info')).data ); - return false; + console.log(userInfoResponse); + if (userInfoResponse.type === 'error') { + ElMessage.error( + errorMessage('获取用户信息失败', userInfoResponse.code, userInfoResponse.msg) + ); + return false; + } + // 判断是否已登录. + if (userStore.token !== null) { + userStore.updateUserInfo(userInfoResponse); + } + getAvailableRoutes(userInfoResponse.data.auth.permissions[0].routers); + } finally { + userStore.initialized = true; } - if (userStore.token !== null) { - userStore.updateUserInfo(userInfoResponse); - } - getAvailableRoutes(userInfoResponse.data.auth.permissions[0].routers); - userStore.isInitialized = true; } if (userStore.addedRouteSet.has(to.fullPath) || to.fullPath === '/404') { return true; diff --git a/src/stores/user.ts b/src/stores/user.ts index dce3c1a..7441e62 100644 --- a/src/stores/user.ts +++ b/src/stores/user.ts @@ -8,10 +8,10 @@ import { z } from 'zod'; type SucceedUserInfoResponse = SucceedResponse>; type UserInfo = Pick; export const useUserStore = defineStore('user', () => { - const token = useLocalStorage('token', null, { + const token = useLocalStorage('token', null, { serializer: StorageSerializers.string }); - const userInfo = useLocalStorage('user-info', null, { + const userInfo = useLocalStorage('user-info', null, { serializer: StorageSerializers.object }); const routeMap = reactive(new Map()); @@ -27,5 +27,5 @@ export const useUserStore = defineStore('user', () => { addedRouteSet.clear(); isInitialized.value = false; } - return { token, userInfo, routeMap, addedRouteSet, isInitialized, updateUserInfo, $reset }; + return { token, userInfo, routeMap, addedRouteSet, initialized: isInitialized, updateUserInfo, $reset }; });