perf(view): ⚡ 优化登录逻辑

Author: nongyehong

package.json

@@ -130,7 +130,7 @@
     "typescript": "^5.7.2",
     "unplugin-auto-import": "^19.0.0",
     "unplugin-vue-components": "^28.0.0",
-    "vite": "6.1.0",
+    "vite": "6.2.0",
     "vitest": "^3.0.5",
     "vue-tsc": "^2.2.0"
   },

pnpm-lock.yaml

@@ -5,7 +5,8 @@ export enum ErrorType {
   Validation = 'Validation',
   Authentication = 'Authentication',
   Unknown = 'Unknown',
-  TokenExpired = 'TokenExpired'
+  TokenExpired = 'TokenExpired',
+  TokenInvalid = 'TokenInvalid'
 }
 
 export interface ErrorDetails {

src/common/exception.ts

@@ -128,7 +128,7 @@ const normalLogin = async () => {
   loading.value = true
   const { account, password } = info.value
   apis
-    .mobileLogin({ account, password })
+    .login({ account, password, source: 'mobile' })
     .then(async (res) => {
       loginDisabled.value = true
       loginText.value = '登录成功, 正在跳转'
@@ -169,9 +169,8 @@ const normalLogin = async () => {
  * @param item 账户信息
  * */
 const giveAccount = (item: UserInfoType) => {
-  const { account, password, avatar, name, uid } = item
+  const { account, avatar, name, uid } = item
   info.value.account = account || ''
-  info.value.password = password || ''
   info.value.avatar = avatar
   info.value.name = name
   info.value.uid = uid

src/mobile/login.vue

@@ -131,8 +131,6 @@ export default {
     }),
   /** 账号密码登录 */
   login: (user: LoginUserReq, abort?: AbortController) => POST<API.Login>(urls.login, user, abort),
-  /** 移动端登录 */
-  mobileLogin: (user: LoginUserReq, abort?: AbortController) => POST<API.Login>(urls.mobileLogin, user, abort),
   /** 退出登录 */
   logout: () => POST<string>(urls.logout),
   /** 注册 */

src/services/apis.ts

@@ -238,6 +238,9 @@ async function Http<T = any>(
             window.dispatchEvent(new Event('needReLogin'))
             throw error
           }
+        } else if (error.type === ErrorType.TokenInvalid) {
+          // Token无效的情况直接抛出错误，不尝试刷新
+          throw error
         }
         throw error
       }
@@ -255,7 +258,13 @@ async function Http<T = any>(
   function getErrorType(status: number): ErrorType {
     if (status >= 500) return ErrorType.Server
     if (status === 401) {
-      console.log('🔄 Token已过期，准备刷新...')
+      console.log('🔄 Token无效，清除token并重新登录...')
+      // 触发重新登录事件
+      window.dispatchEvent(new Event('needReLogin'))
+      return ErrorType.TokenInvalid
+    }
+    if (status === 40004) {
+      console.log('🔄 Token需要续签，准备刷新...')
       return ErrorType.TokenExpired
     }
     if (status === 403) {

src/services/http.ts

@@ -41,6 +41,8 @@ export type LoginUserReq = {
   account: string
   /** 密码 */
   password: string
+  /** 登录方式 pc/mobile */
+  source: 'pc' | 'mobile'
 }
 
 export type RegisterUserReq = {
@@ -185,10 +187,12 @@ export type MarkMsgReq = {
 export type UserInfoType = {
   /** 用户唯一标识 */
   uid: number
-  /** 用户头像 */
+  /** 用户账号 */
   account: string
-  /** 用户头像 */
-  password: string
+  /** Hula号 */
+  accountCode: string
+  /** 密码 */
+  password?: string
   /** 用户头像 */
   avatar: string
   /** 用户名 */

src/services/types.ts

@@ -60,8 +60,6 @@ export default {
   login: `${prefix + URLEnum.TOKEN}/login`,
   // 续签
   refreshToken: `${prefix + URLEnum.TOKEN}/refreshToken`,
-  // 移动端登录
-  mobileLogin: `${prefix + URLEnum.TOKEN}/mobileLogin`,
   // 退出登录
   logout: `${prefix + URLEnum.TOKEN}/logout`,
   // 检查token是否有效

src/services/urls.ts

@@ -170,17 +170,12 @@ import { AvatarUtils } from '@/utils/AvatarUtils'
 import { useMitt } from '@/hooks/useMitt'
 import { WsResponseMessageType } from '@/services/wsType'
 import { useNetwork } from '@vueuse/core'
-import { computedToken } from '@/services/request'
-import ws from '@/services/webSocket'
-import { useGlobalStore } from '@/stores/global.ts'
 import { useUserStatusStore } from '@/stores/userStatus'
 
 const settingStore = useSettingStore()
 const userStore = useUserStore()
-const globalStore = useGlobalStore()
 const userStatusStore = useUserStatusStore()
 const { stateId } = storeToRefs(userStatusStore)
-const { isTrayMenuShow } = storeToRefs(globalStore)
 /** 网络连接是否正常 */
 const { isOnline } = useNetwork()
 const loginHistoriesStore = useLoginHistoriesStore()
@@ -206,8 +201,9 @@ const accountPH = ref('输入HuLa账号')
 const passwordPH = ref('输入HuLa密码')
 /** 登录按钮的文本内容 */
 const loginText = ref('登录')
+/** 是否直接跳转 */
+const isJumpDirectly = ref(false)
 const { createWebviewWindow } = useWindow()
-const route = useRoute()
 
 watchEffect(() => {
   loginDisabled.value = !(info.value.account && info.value.password && protocol.value)
@@ -272,13 +268,11 @@ const normalLogin = async (auto = false) => {
   loading.value = true
   // 根据auto参数决定从哪里获取登录信息
   const loginInfo = auto ? (userStore.userInfo as UserInfoType) : info.value
-  const { account, password } = loginInfo
+  const { account } = loginInfo
 
   apis
-    .login({ account, password })
+    .login({ account, password: info.value.password, source: 'pc' })
     .then(async (res) => {
-      console.log(res)
-
       loginDisabled.value = true
       loginText.value = '登录成功, 正在跳转'
       userStore.isSign = true
@@ -369,30 +363,46 @@ const enterKey = (e: KeyboardEvent) => {
 }
 
 onBeforeMount(async () => {
-  // 如果不是自动登录且当前在登录页面，清除 TOKEN，防止用户直接使用控制台退出导致登录前还没有退出账号就继续登录
-  if (!login.value.autoLogin && route.path === '/login' && TOKEN.value) {
-    await apis.logout()
-    isTrayMenuShow.value = false
-    computedToken.clear()
-    // 重新初始化 WebSocket 连接，此时传入 null 作为 token
-    ws.initConnect()
-    const headers = new Headers()
-    headers.append('Authorization', '')
+  const token = localStorage.getItem('TOKEN')
+  const refreshToken = localStorage.getItem('REFRESH_TOKEN')
+
+  if (token && refreshToken) {
+    isJumpDirectly.value = true
+    try {
+      // 验证token有效性
+      await userStore.getUserDetailAction()
+      // token有效，直接打开主窗口
+      await openHomeWindow()
+      return // 直接返回，不执行后续的登录相关逻辑
+    } catch (error) {
+      isJumpDirectly.value = false
+      // token无效，清除token并重置状态
+      localStorage.removeItem('TOKEN')
+      localStorage.removeItem('REFRESH_TOKEN')
+      userStore.userInfo = {}
+      userStore.isSign = false
+    }
   }
 })
 
 onMounted(async () => {
-  await getCurrentWebviewWindow().show()
+  // 只有在需要登录的情况下才显示登录窗口
+  if (!isJumpDirectly.value) {
+    await getCurrentWebviewWindow().show()
+  }
+
   useMitt.on(WsResponseMessageType.NO_INTERNET, () => {
     loginDisabled.value = true
     loginText.value = '服务异常断开'
   })
+
   // 自动登录
   if (login.value.autoLogin && TOKEN.value) {
     normalLogin(true)
   } else {
     loginHistories.length > 0 && giveAccount(loginHistories[0])
   }
+
   window.addEventListener('click', closeMenu, true)
   window.addEventListener('keyup', enterKey)
 })