fix: optimize routing logic

src/layouts/components/header/UserCenter.vue

@@ -51,7 +51,7 @@ function handleSelect(key: string | number) {
         size="large"
         :src="userInfo?.avatar"
       />
-      {{ userInfo?.nickName }}
+      {{ userInfo?.nickname }}
     </HeaderButton>
   </n-dropdown>
 </template>

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<ApiAuth.loginToken>('/updateToken', params)
+  const method = alovaInstance.Post<ApiAuth.loginInfo>('/updateToken', params)
   method.meta = {
     authRole: 'refreshToken',
   }
   return method
 }
-export function fetchUserInfo(params: any) {
+
-  return alovaInstance.Get<Auth.UserInfo>('/getUserInfo', { params })
-}
 export function fetchUserRoutes(params: { id: number }) {
   return alovaInstance.Get<AppRoute.RowRoute[]>('/getUserRoutes', { params })
 }

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 }
-        const route = unref(router.currentRoute)
+      router.push({
-        const query = route.query as { redirect: string }
+        path: query.redirect || '/',
-        router.push({
+      })
-          path: query.redirect || '/',
-        })
 
-        // 触发用户提示
+      // 触发用户提示
-        window.$notification?.success({
+      window.$notification?.success({
-          title: '登录成功!',
+        title: '登录成功!',
-          content: `欢迎回来😊，${this.userInfo?.nickName}!`,
+        content: `欢迎回来😊，${this.userInfo?.nickname}!`,
-          duration: 3000,
+        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
     },
   },
 })

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,

src/typings/api.d.ts

@@ -2,19 +2,24 @@
 
 /** 后端返回的用户相关类型 */
 declare namespace ApiAuth {
-  /** 返回的用户信息 */
+  /* 登录返回的用户字段 */
-  type UserInfo = Auth.UserInfo
+  interface loginInfo {
-  /* 登录token字段 */
+    /** 用户id */
-  interface loginToken {
-    accessToken: string
-    avatar?: string
-    email?: string
     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 {

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 {

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

src/views/dashboard/workbench/index.vue

@@ -20,7 +20,7 @@ const { userInfo } = useAuthStore()
             />
             <div class="pl-12px">
               <h3 class="text-18px font-semibold">
-                您好，{{ userInfo?.nickName }},今天又是充满活力的一天！
+                您好，{{ userInfo?.nickname }},今天又是充满活力的一天！
               </h3>
               <p class="leading-30px text-[#999]">
                 今日多云转晴，20℃ - 25℃！

src/views/userCenter/index.vue

@@ -48,7 +48,7 @@ function handleValidateClick() {
         <n-space size="large">
           <n-avatar round :size="128" :src="userInfo?.avatar" />
 
-          <n-descriptions label-placement="left" :column="2" :title="`傍晚好，${userInfo?.nickName}，这里是简单的个人中心模板`">
+          <n-descriptions label-placement="left" :column="2" :title="`傍晚好，${userInfo?.nickname}，这里是简单的个人中心模板`">
             <n-descriptions-item label="id">
               {{ userInfo?.id }}
             </n-descriptions-item>
@@ -56,7 +56,7 @@ function handleValidateClick() {
               {{ userInfo?.userName }}
             </n-descriptions-item>
             <n-descriptions-item label="真实名称">
-              {{ userInfo?.nickName }}
+              {{ userInfo?.nickname }}
             </n-descriptions-item>
             <n-descriptions-item label="角色">
               {{ userInfo?.role }}