Quellcode durchsuchen

refactor: update authentication handling to use cookies instead of localStorage

- Remove refresh token handling from user store and auth utility functions
- Update token storage to use cookies with expiration time
- Simplify login action in user store to accommodate new token management
- Adjust request interceptor to handle 401 errors more gracefully
yb vor 3 Wochen
Ursprung
Commit
38c08e6095
3 geänderte Dateien mit 46 neuen und 33 gelöschten Zeilen
  1. 4 9
      src/store/user.ts
  2. 27 14
      src/utils/auth.ts
  3. 15 10
      src/utils/request.ts

+ 4 - 9
src/store/user.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import { ref } from 'vue'
 import type { AdminInfo, LoginParams } from '@/types'
 import type { AdminInfo, LoginParams } from '@/types'
-import { getToken, setToken, removeToken, setRefreshToken, removeRefreshToken } from '@/utils/auth'
+import { getToken, setToken, removeToken } from '@/utils/auth'
 import { login, logout, getInfo } from '@/api/login'
 import { login, logout, getInfo } from '@/api/login'
 
 
 export const useUserStore = defineStore('user', () => {
 export const useUserStore = defineStore('user', () => {
@@ -11,13 +11,10 @@ export const useUserStore = defineStore('user', () => {
   async function loginAction(loginForm: LoginParams) {
   async function loginAction(loginForm: LoginParams) {
     const res = await login(loginForm)
     const res = await login(loginForm)
     if (res.code === 200 && res.data) {
     if (res.code === 200 && res.data) {
-      // 新 API 返回 token 和 admin
-      const { token: accessToken, refreshToken, admin } = res.data
+      const { token: accessToken, expiresIn, admin } = res.data
       token.value = accessToken
       token.value = accessToken
-      setToken(accessToken)
-      if (refreshToken) {
-        setRefreshToken(refreshToken)
-      }
+      // 使用 cookie 存储 token,设置过期时间
+      setToken(accessToken, expiresIn)
       // 设置用户信息
       // 设置用户信息
       if (admin) {
       if (admin) {
         userInfo.value = admin
         userInfo.value = admin
@@ -44,7 +41,6 @@ export const useUserStore = defineStore('user', () => {
       token.value = ''
       token.value = ''
       userInfo.value = null
       userInfo.value = null
       removeToken()
       removeToken()
-      removeRefreshToken()
     }
     }
   }
   }
 
 
@@ -52,7 +48,6 @@ export const useUserStore = defineStore('user', () => {
     token.value = ''
     token.value = ''
     userInfo.value = null
     userInfo.value = null
     removeToken()
     removeToken()
-    removeRefreshToken()
   }
   }
 
 
   return {
   return {

+ 27 - 14
src/utils/auth.ts

@@ -1,26 +1,39 @@
-const TOKEN_KEY = 'Admin-Token'
-const REFRESH_TOKEN_KEY = 'Admin-Refresh-Token'
+const TOKEN_KEY = 'token'
 
 
-export function getToken(): string | null {
-  return localStorage.getItem(TOKEN_KEY)
+/**
+ * 获取 cookie 值
+ */
+function getCookie(name: string): string | null {
+  const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'))
+  return match ? decodeURIComponent(match[2]) : null
 }
 }
 
 
-export function setToken(token: string): void {
-  localStorage.setItem(TOKEN_KEY, token)
+/**
+ * 设置 cookie
+ * @param name cookie 名称
+ * @param value cookie 值
+ * @param expiresIn 过期时间(秒),默认 1 天
+ */
+function setCookie(name: string, value: string, expiresIn: number = 86400): void {
+  const expires = new Date(Date.now() + expiresIn * 1000).toUTCString()
+  document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/; SameSite=Lax`
 }
 }
 
 
-export function removeToken(): void {
-  localStorage.removeItem(TOKEN_KEY)
+/**
+ * 删除 cookie
+ */
+function removeCookie(name: string): void {
+  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`
 }
 }
 
 
-export function getRefreshToken(): string | null {
-  return localStorage.getItem(REFRESH_TOKEN_KEY)
+export function getToken(): string | null {
+  return getCookie(TOKEN_KEY)
 }
 }
 
 
-export function setRefreshToken(token: string): void {
-  localStorage.setItem(REFRESH_TOKEN_KEY, token)
+export function setToken(token: string, expiresIn: number = 86400): void {
+  setCookie(TOKEN_KEY, token, expiresIn)
 }
 }
 
 
-export function removeRefreshToken(): void {
-  localStorage.removeItem(REFRESH_TOKEN_KEY)
+export function removeToken(): void {
+  removeCookie(TOKEN_KEY)
 }
 }

+ 15 - 10
src/utils/request.ts

@@ -1,5 +1,5 @@
 import axios, { type AxiosInstance, type AxiosRequestConfig, type AxiosResponse } from 'axios'
 import axios, { type AxiosInstance, type AxiosRequestConfig, type AxiosResponse } from 'axios'
-import { ElMessage, ElMessageBox } from 'element-plus'
+import { ElMessage } from 'element-plus'
 import { getToken } from './auth'
 import { getToken } from './auth'
 import { useUserStore } from '@/store/user'
 import { useUserStore } from '@/store/user'
 import type { ApiResponse } from '@/types'
 import type { ApiResponse } from '@/types'
@@ -39,15 +39,11 @@ service.interceptors.response.use(
     }
     }
 
 
     if (code === 401) {
     if (code === 401) {
-      ElMessageBox.confirm('登录状态已过期,请重新登录', '系统提示', {
-        confirmButtonText: '重新登录',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        const userStore = useUserStore()
-        userStore.resetToken()
-        location.href = '/login'
-      })
+      // 登录过期,直接跳转到登录页
+      const userStore = useUserStore()
+      userStore.resetToken()
+      ElMessage.warning('登录已过期,请重新登录')
+      location.href = '/login'
       return Promise.reject(new Error('登录已过期'))
       return Promise.reject(new Error('登录已过期'))
     }
     }
 
 
@@ -64,6 +60,15 @@ service.interceptors.response.use(
     return res as any
     return res as any
   },
   },
   (error) => {
   (error) => {
+    // HTTP 401 状态码处理
+    if (error.response?.status === 401) {
+      const userStore = useUserStore()
+      userStore.resetToken()
+      ElMessage.warning('登录已过期,请重新登录')
+      location.href = '/login'
+      return Promise.reject(new Error('登录已过期'))
+    }
+
     let { message } = error
     let { message } = error
     if (message === 'Network Error') {
     if (message === 'Network Error') {
       message = '网络连接异常'
       message = '网络连接异常'