diff --git a/src/constants/cache-keys.ts b/src/constants/cache-keys.ts new file mode 100644 index 00000000..aa44695f --- /dev/null +++ b/src/constants/cache-keys.ts @@ -0,0 +1,7 @@ +/** + * 缓存键常量 + */ +export const ACCESS_TOKEN_KEY = "access_token"; +export const REFRESH_TOKEN_KEY = "refresh_token"; +export const DICT_CACHE_KEY = "dict_cache"; +// 可在此处添加其他缓存键 diff --git a/src/hooks/websocket/core/useStomp.ts b/src/hooks/websocket/core/useStomp.ts index d96c36eb..5e603041 100644 --- a/src/hooks/websocket/core/useStomp.ts +++ b/src/hooks/websocket/core/useStomp.ts @@ -1,5 +1,6 @@ import { Client, IMessage, StompSubscription } from "@stomp/stompjs"; -import { getAccessToken } from "@/utils/auth"; +import { Storage } from "@/utils/storage"; +import { ACCESS_TOKEN_KEY } from "@/constants/cache-keys"; import { ref, watch } from "vue"; export interface UseStompOptions { @@ -66,7 +67,7 @@ export function useStomp(options: UseStompOptions = {}) { } // 每次连接前重新获取最新令牌,不依赖之前的token值 - const currentToken = getAccessToken(); + const currentToken = Storage.get(ACCESS_TOKEN_KEY, ""); // 检查令牌是否为空,如果为空则不进行连接 if (!currentToken) { @@ -120,7 +121,7 @@ export function useStomp(options: UseStompOptions = {}) { client.value = null; // 检查当前是否有有效令牌 - const freshToken = getAccessToken(); + const freshToken = Storage.get(ACCESS_TOKEN_KEY, ""); if (freshToken) { initializeClient(); connect(); diff --git a/src/hooks/websocket/services/useOnlineCount.ts b/src/hooks/websocket/services/useOnlineCount.ts index be81365c..f4d697bf 100644 --- a/src/hooks/websocket/services/useOnlineCount.ts +++ b/src/hooks/websocket/services/useOnlineCount.ts @@ -1,7 +1,8 @@ import { ref, onMounted, onUnmounted, watch } from "vue"; import { useStomp } from "../core/useStomp"; import { ElMessage } from "element-plus"; -import { getAccessToken } from "@/utils/auth"; +import { Storage } from "@/utils/storage"; +import { ACCESS_TOKEN_KEY } from "@/constants/cache-keys"; /** * 在线用户计数Hook @@ -99,7 +100,7 @@ export function useOnlineCount() { } // 检查是否有可用的令牌 - const hasToken = !!getAccessToken(); + const hasToken = !!Storage.get(ACCESS_TOKEN_KEY, ""); if (!hasToken) { console.log("没有检测到有效令牌,不尝试WebSocket连接"); return; @@ -121,7 +122,7 @@ export function useOnlineCount() { closeWebSocket(); setTimeout(() => { // 再次检查令牌有效性 - if (getAccessToken()) { + if (Storage.get(ACCESS_TOKEN_KEY, "")) { initWebSocket(); } else { console.log("令牌无效,放弃重连"); diff --git a/src/plugins/permission.ts b/src/plugins/permission.ts index 8f5a07d1..f9bff189 100644 --- a/src/plugins/permission.ts +++ b/src/plugins/permission.ts @@ -1,6 +1,7 @@ import type { NavigationGuardNext, RouteLocationNormalized, RouteRecordRaw } from "vue-router"; import NProgress from "@/utils/nprogress"; -import { getAccessToken } from "@/utils/auth"; +import { Storage } from "@/utils/storage"; +import { ACCESS_TOKEN_KEY } from "@/constants/cache-keys"; import router from "@/router"; import { usePermissionStore, useUserStore } from "@/store"; @@ -11,7 +12,7 @@ export function setupPermission() { router.beforeEach(async (to, from, next) => { NProgress.start(); - const isLogin = !!getAccessToken(); // 判断是否登录 + const isLogin = !!Storage.get(ACCESS_TOKEN_KEY, ""); // 判断是否登录 if (isLogin) { if (to.path === "/login") { // 已登录,访问登录页,跳转到首页 diff --git a/src/plugins/permission.ts.bak b/src/plugins/permission.ts.bak new file mode 100644 index 00000000..e69de29b diff --git a/src/plugins/websocket.ts b/src/plugins/websocket.ts index 84745950..1c2ad754 100644 --- a/src/plugins/websocket.ts +++ b/src/plugins/websocket.ts @@ -1,5 +1,6 @@ import { useDictSync } from "@/hooks/websocket/services/useDictSync"; -import { getAccessToken } from "@/utils/auth"; +import { Storage } from "@/utils/storage"; +import { ACCESS_TOKEN_KEY } from "@/constants/cache-keys"; // 用于防止重复初始化的状态标记 let isInitialized = false; @@ -24,7 +25,7 @@ export function setupWebSocket() { } // 检查token是否存在 - const token = getAccessToken(); + const token = Storage.get(ACCESS_TOKEN_KEY, ""); if (!token) { console.warn( "[WebSocketPlugin] 未找到访问令牌,WebSocket初始化已跳过。用户登录后将自动重新连接。" diff --git a/src/store/modules/user.store.ts b/src/store/modules/user.store.ts index 5e4d8d74..a8ec019e 100644 --- a/src/store/modules/user.store.ts +++ b/src/store/modules/user.store.ts @@ -5,7 +5,8 @@ import { useDictStoreHook } from "@/store/modules/dict.store"; import AuthAPI, { type LoginFormData } from "@/api/auth.api"; import UserAPI, { type UserInfo } from "@/api/system/user.api"; -import { setAccessToken, setRefreshToken, getRefreshToken, clearToken } from "@/utils/auth"; +import { Storage } from "@/utils/storage"; +import { ACCESS_TOKEN_KEY, REFRESH_TOKEN_KEY } from "@/constants/cache-keys"; export const useUserStore = defineStore("user", () => { const userInfo = useStorage("userInfo", {} as UserInfo); @@ -21,8 +22,8 @@ export const useUserStore = defineStore("user", () => { AuthAPI.login(LoginFormData) .then((data) => { const { accessToken, refreshToken } = data; - setAccessToken(accessToken); // eyJhbGciOiJIUzI1NiJ9.xxx.xxx - setRefreshToken(refreshToken); + Storage.set(ACCESS_TOKEN_KEY, accessToken); + Storage.set(REFRESH_TOKEN_KEY, refreshToken); resolve(); }) .catch((error) => { @@ -73,13 +74,13 @@ export const useUserStore = defineStore("user", () => { * 刷新 token */ function refreshToken() { - const refreshToken = getRefreshToken(); + const refreshToken = Storage.get(REFRESH_TOKEN_KEY, ""); return new Promise((resolve, reject) => { AuthAPI.refreshToken(refreshToken) .then((data) => { const { accessToken, refreshToken } = data; - setAccessToken(accessToken); - setRefreshToken(refreshToken); + Storage.set(ACCESS_TOKEN_KEY, accessToken); + Storage.set(REFRESH_TOKEN_KEY, refreshToken); resolve(); }) .catch((error) => { @@ -96,7 +97,8 @@ export const useUserStore = defineStore("user", () => { return new Promise((resolve) => { useDictStoreHook().clearDictCache(); usePermissionStoreHook().resetRouter(); - clearToken(); + Storage.remove(ACCESS_TOKEN_KEY); + Storage.remove(REFRESH_TOKEN_KEY); userInfo.value = {} as UserInfo; resolve(); }); diff --git a/src/utils/auth.ts b/src/utils/auth.ts deleted file mode 100644 index cfbedf84..00000000 --- a/src/utils/auth.ts +++ /dev/null @@ -1,27 +0,0 @@ -// 访问 token 缓存的 key -const ACCESS_TOKEN_KEY = "access_token"; -// 刷新 token 缓存的 key -const REFRESH_TOKEN_KEY = "refresh_token"; - -function getAccessToken(): string { - return localStorage.getItem(ACCESS_TOKEN_KEY) || ""; -} - -function setAccessToken(token: string) { - localStorage.setItem(ACCESS_TOKEN_KEY, token); -} - -function getRefreshToken(): string { - return localStorage.getItem(REFRESH_TOKEN_KEY) || ""; -} - -function setRefreshToken(token: string) { - localStorage.setItem(REFRESH_TOKEN_KEY, token); -} - -function clearToken() { - localStorage.removeItem(ACCESS_TOKEN_KEY); - localStorage.removeItem(REFRESH_TOKEN_KEY); -} - -export { getAccessToken, setAccessToken, clearToken, getRefreshToken, setRefreshToken }; diff --git a/src/utils/request.ts b/src/utils/request.ts index c3bd61f9..7a67789b 100644 --- a/src/utils/request.ts +++ b/src/utils/request.ts @@ -2,7 +2,8 @@ import axios, { type InternalAxiosRequestConfig, type AxiosResponse } from "axio import qs from "qs"; import { useUserStoreHook } from "@/store/modules/user.store"; import { ResultEnum } from "@/enums/api/result.enum"; -import { getAccessToken } from "@/utils/auth"; +import { Storage } from "@/utils/storage"; +import { ACCESS_TOKEN_KEY } from "@/constants/cache-keys"; import router from "@/router"; // 创建 axios 实例 @@ -15,7 +16,7 @@ const service = axios.create({ // 请求拦截器 service.interceptors.request.use( (config: InternalAxiosRequestConfig) => { - const accessToken = getAccessToken(); + const accessToken = Storage.get(ACCESS_TOKEN_KEY, ""); // 如果 Authorization 设置为 no-auth,则不携带 Token if (config.headers.Authorization !== "no-auth" && accessToken) { config.headers.Authorization = `Bearer ${accessToken}`; @@ -69,7 +70,7 @@ async function handleTokenRefresh(config: InternalAxiosRequestConfig) { return new Promise((resolve) => { // 封装需要重试的请求 const retryRequest = () => { - config.headers.Authorization = `Bearer ${getAccessToken()}`; + config.headers.Authorization = `Bearer ${Storage.get(ACCESS_TOKEN_KEY, "")}`; resolve(service(config)); }; waitingQueue.push(retryRequest); diff --git a/src/utils/storage.ts b/src/utils/storage.ts new file mode 100644 index 00000000..8c6bef24 --- /dev/null +++ b/src/utils/storage.ts @@ -0,0 +1,37 @@ +/** + * 存储工具类 + * 提供localStorage和sessionStorage操作方法 + */ +export class Storage { + /** + * localStorage 存储 + */ + static set(key: string, value: any): void { + localStorage.setItem(key, JSON.stringify(value)); + } + + static get(key: string, defaultValue?: T): T { + const value = localStorage.getItem(key); + return value ? JSON.parse(value) : defaultValue; + } + + static remove(key: string): void { + localStorage.removeItem(key); + } + + /** + * sessionStorage 存储 + */ + static sessionSet(key: string, value: any): void { + sessionStorage.setItem(key, JSON.stringify(value)); + } + + static sessionGet(key: string, defaultValue?: T): T { + const value = sessionStorage.getItem(key); + return value ? JSON.parse(value) : defaultValue; + } + + static sessionRemove(key: string): void { + sessionStorage.removeItem(key); + } +}