From a607b63950ce871e50aab128c13d3d98729c735a Mon Sep 17 00:00:00 2001 From: chansee97 Date: Sun, 24 Mar 2024 22:56:03 +0800 Subject: [PATCH] fix: optimize routing logic --- src/layouts/components/header/UserCenter.vue | 2 +- src/service/api/login.ts | 6 +- src/store/auth.ts | 61 +++++++------------- src/store/route.ts | 6 +- src/typings/api.d.ts | 23 +++++--- src/typings/business.d.ts | 13 ----- src/typings/global.d.ts | 2 +- src/views/dashboard/workbench/index.vue | 2 +- src/views/userCenter/index.vue | 4 +- 9 files changed, 46 insertions(+), 73 deletions(-) diff --git a/src/layouts/components/header/UserCenter.vue b/src/layouts/components/header/UserCenter.vue index 105b091..67268b2 100644 --- a/src/layouts/components/header/UserCenter.vue +++ b/src/layouts/components/header/UserCenter.vue @@ -51,7 +51,7 @@ function handleSelect(key: string | number) { size="large" :src="userInfo?.avatar" /> - {{ userInfo?.nickName }} + {{ userInfo?.nickname }} diff --git a/src/service/api/login.ts b/src/service/api/login.ts index 546e66d..04c42c3 100644 --- a/src/service/api/login.ts +++ b/src/service/api/login.ts @@ -13,15 +13,13 @@ export function fetchLogin(params: Ilogin) { return methodInstance } export function fetchUpdateToken(params: any) { - const method = alovaInstance.Post('/updateToken', params) + const method = alovaInstance.Post('/updateToken', params) method.meta = { authRole: 'refreshToken', } return method } -export function fetchUserInfo(params: any) { - return alovaInstance.Get('/getUserInfo', { params }) -} + export function fetchUserRoutes(params: { id: number }) { return alovaInstance.Get('/getUserRoutes', { params }) } diff --git a/src/store/auth.ts b/src/store/auth.ts index ab33c06..7dbdc6e 100644 --- a/src/store/auth.ts +++ b/src/store/auth.ts @@ -1,11 +1,11 @@ import { useRouteStore } from './route' import { useTabStore } from './tab' -import { fetchLogin, fetchUserInfo } from '@/service' +import { fetchLogin } from '@/service' import { router } from '@/router' import { local } from '@/utils' interface AuthStatus { - userInfo: Auth.UserInfo | null + userInfo: ApiAuth.loginInfo | null token: string } export const useAuthStore = defineStore('auth-store', { @@ -62,52 +62,31 @@ export const useAuthStore = defineStore('auth-store', { }, /* 登录后的处理函数 */ - async handleAfterLogin(data: ApiAuth.loginToken) { + async handleAfterLogin(data: ApiAuth.loginInfo) { // 将token和userInfo保存下来 - const catchSuccess = await this.catchUserInfo(data) + local.set('userInfo', data) + local.set('token', data.accessToken) + local.set('refreshToken', data.refreshToken) + this.token = data.accessToken + this.userInfo = data // 添加路由和菜单 const routeStore = useRouteStore() await routeStore.initAuthRoute() - // 登录写入信息成功 - if (catchSuccess) { - // 进行重定向跳转 - const route = unref(router.currentRoute) - const query = route.query as { redirect: string } - router.push({ - path: query.redirect || '/', - }) + // 进行重定向跳转 + const route = unref(router.currentRoute) + const query = route.query as { redirect: string } + router.push({ + path: query.redirect || '/', + }) - // 触发用户提示 - window.$notification?.success({ - title: '登录成功!', - content: `欢迎回来😊，${this.userInfo?.nickName}!`, - duration: 3000, - }) - return - } - // 如果不成功则重置存储 - await this.resetAuthStore() - }, - - /* 缓存用户信息 */ - async catchUserInfo(userInfo: ApiAuth.loginToken) { - let catchSuccess = false - const { accessToken, refreshToken, id } = userInfo - // 先存储token - local.set('token', accessToken) - local.set('refreshToken', refreshToken) - this.token = accessToken - const { error, data } = await fetchUserInfo({ id }) - if (error) - return catchSuccess - // 请求/存储用户信息 - local.set('userInfo', data) - this.userInfo = data - catchSuccess = true - - return catchSuccess + // 触发用户提示 + window.$notification?.success({ + title: '登录成功!', + content: `欢迎回来😊，${this.userInfo?.nickname}!`, + duration: 3000, + }) }, }, }) diff --git a/src/store/route.ts b/src/store/route.ts index 98d970c..4c9beda 100644 --- a/src/store/route.ts +++ b/src/store/route.ts @@ -9,6 +9,7 @@ import { fetchUserRoutes } from '@/service' import { staticRoutes } from '@/router/routes.static' import { usePermission } from '@/hooks' import { BasicLayout } from '@/layouts/index' +import { useAuthStore } from '@/store/auth' interface RoutesStatus { isInitAuthRoute: boolean @@ -163,8 +164,11 @@ export const useRouteStore = defineStore('route-store', { // 根据用户id来获取用户的路由 const userInfo = local.get('userInfo') - if (!userInfo || !userInfo.id) + if (!userInfo || !userInfo.id) { + const authStore = useAuthStore() + authStore.resetAuthStore() return + } const { data } = await fetchUserRoutes({ id: userInfo.id, diff --git a/src/typings/api.d.ts b/src/typings/api.d.ts index 0973fa5..cfd98d6 100644 --- a/src/typings/api.d.ts +++ b/src/typings/api.d.ts @@ -2,19 +2,24 @@ /** 后端返回的用户相关类型 */ declare namespace ApiAuth { - /** 返回的用户信息 */ - type UserInfo = Auth.UserInfo - /* 登录token字段 */ - interface loginToken { - accessToken: string - avatar?: string - email?: string + /* 登录返回的用户字段 */ + interface loginInfo { + /** 用户id */ id: number + /** 用户名 */ + username: string + /* 用户头像 */ + avatar?: string + /* 用户邮箱 */ + email?: string + /* 用户昵称 */ nickname?: string notes?: string - refreshToken: string tel?: string - username: string + /** 用户角色类型 */ + role: Auth.RoleType + accessToken: string + refreshToken: string } } declare namespace CommonList { diff --git a/src/typings/business.d.ts b/src/typings/business.d.ts index b7aad3f..eff5a9e 100644 --- a/src/typings/business.d.ts +++ b/src/typings/business.d.ts @@ -2,19 +2,6 @@ declare namespace Auth { /** 用户角色类型 */ type RoleType = 'super' | 'admin' | 'user' - interface UserInfo { - /** 用户id */ - id: number - /** 用户名 */ - userName: string - /* 用户称呼 */ - nickName: string - /* 用户头像 */ - avatar: string - /** 用户角色类型 */ - role: RoleType - - } } /* 系统消息 */ declare namespace Message { diff --git a/src/typings/global.d.ts b/src/typings/global.d.ts index 382c08a..99650e4 100644 --- a/src/typings/global.d.ts +++ b/src/typings/global.d.ts @@ -26,7 +26,7 @@ declare namespace Storage { } interface Local { - userInfo: Auth.UserInfo + userInfo: ApiAuth.loginInfo token: string refreshToken: string tabsRoutes: string diff --git a/src/views/dashboard/workbench/index.vue b/src/views/dashboard/workbench/index.vue index 072e691..b622bbe 100644 --- a/src/views/dashboard/workbench/index.vue +++ b/src/views/dashboard/workbench/index.vue @@ -20,7 +20,7 @@ const { userInfo } = useAuthStore() />

- 您好，{{ userInfo?.nickName }},今天又是充满活力的一天！ + 您好，{{ userInfo?.nickname }},今天又是充满活力的一天！

今日多云转晴，20℃ - 25℃！ diff --git a/src/views/userCenter/index.vue b/src/views/userCenter/index.vue index 972c368..97e44d0 100644 --- a/src/views/userCenter/index.vue +++ b/src/views/userCenter/index.vue @@ -48,7 +48,7 @@ function handleValidateClick() { - + {{ userInfo?.id }} @@ -56,7 +56,7 @@ function handleValidateClick() { {{ userInfo?.userName }} - {{ userInfo?.nickName }} + {{ userInfo?.nickname }} {{ userInfo?.role }}