移除 http-client.ts adminTokenKey、getToken()、setToken()、clearToken()

新增 store.userInfo.ts adminTokenKey、token、setToken()、removeToken()、clear()

gen/templates/http-client.ejs

@@ -4,28 +4,9 @@ const { apiConfig, generateResponses, config } = it;
 
 import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, HeadersDefaults, ResponseType, RawAxiosRequestHeaders } from 'axios'
 import { ElLoading, ElMessage, LoadingOptions } from 'element-plus'
-import { Local, Session } from '/@/utils/storage'
+import { storeToRefs } from 'pinia'
 import { useUserInfo } from '/@/stores/userInfo'
 
-export const adminTokenKey = 'admin-token'
-
-// 获得token
-export const getToken = () => {
-  return Local.get(adminTokenKey)
-}
-// 设置token
-export const setToken = (token: any) => {
-  useUserInfo().setToken(token)
-  return Local.set(adminTokenKey, token)
-}
-// 清除token
-export const clearToken = () => {
-  Local.remove(adminTokenKey)
-  Session.remove('token')
-  window.requests = []
-  window.location.reload()
-}
-
 export type QueryParamsType = Record<string | number, any>;
 
 export interface FullRequestParams extends Omit<AxiosRequestConfig, "data" | "params" | "url" | "responseType"> {
@@ -209,9 +190,11 @@ export class HttpClient<SecurityDataType = unknown> {
     * @param {*} config
     */
     protected async refreshToken(config: any) {
-      const token = getToken()
+      const storesUseUserInfo = useUserInfo()
+      const { userInfos } = storeToRefs(storesUseUserInfo)
+      const token = userInfos.value.token
       if (!token) {
-        clearToken()
+        storesUseUserInfo.clear()
         return Promise.reject(config)
       }
 
@@ -239,19 +222,19 @@ export class HttpClient<SecurityDataType = unknown> {
       .then((res) => {
         if (res?.success) {
           const token = res.data.token
-          setToken(token)
+          storesUseUserInfo.setToken(token)
           if (window.requests?.length > 0) {
             window.requests.forEach((apiRequest) => apiRequest())
             window.requests = []
           }
           return this.instance(config)
         } else {
-          clearToken()
+          storesUseUserInfo.clear()
           return Promise.reject(res)
         }
       })
       .catch((error) => {
-        clearToken()
+        storesUseUserInfo.clear()
         return Promise.reject(error)
       })
       .finally(() => {
@@ -351,7 +334,8 @@ export class HttpClient<SecurityDataType = unknown> {
               }
             }
 
-            const accessToken = getToken()
+            const { userInfos } = storeToRefs(useUserInfo())
+            const accessToken = userInfos.value.token
             config.headers!['Authorization'] = `Bearer ${accessToken}`
             return config
           },

src/api/admin/data-contracts.ts

@@ -215,6 +215,7 @@ export interface AuthGetPasswordEncryptKeyOutput {
 }
 
 export interface AuthGetUserInfoOutput {
+  /** 用户个人信息 */
   user?: AuthUserProfileDto
   /** 用户菜单列表 */
   menus?: AuthUserMenuDto[] | null
@@ -223,6 +224,7 @@ export interface AuthGetUserInfoOutput {
 }
 
 export interface AuthGetUserPermissionsOutput {
+  /** 用户个人信息 */
   user?: AuthUserProfileDto
   /** 用户权限列表 */
   permissions?: string[] | null
@@ -291,6 +293,7 @@ export interface AuthUserMenuDto {
   sort?: number | null
 }
 
+/** 用户个人信息 */
 export interface AuthUserProfileDto {
   /** 账号 */
   userName?: string | null
@@ -2098,6 +2101,7 @@ export interface ResultOutputAuthUserProfileDto {
   code?: string | null
   /** 消息 */
   msg?: string | null
+  /** 用户个人信息 */
   data?: AuthUserProfileDto
 }
 

src/api/admin/http-client.ts

@@ -11,28 +11,9 @@
 
 import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, HeadersDefaults, RawAxiosRequestHeaders, ResponseType } from 'axios'
 import { ElLoading, ElMessage, LoadingOptions } from 'element-plus'
-import { Local, Session } from '/@/utils/storage'
+import { storeToRefs } from 'pinia'
 import { useUserInfo } from '/@/stores/userInfo'
 
-export const adminTokenKey = 'admin-token'
-
-// 获得token
-export const getToken = () => {
-  return Local.get(adminTokenKey)
-}
-// 设置token
-export const setToken = (token: any) => {
-  useUserInfo().setToken(token)
-  return Local.set(adminTokenKey, token)
-}
-// 清除token
-export const clearToken = () => {
-  Local.remove(adminTokenKey)
-  Session.remove('token')
-  window.requests = []
-  window.location.reload()
-}
-
 export type QueryParamsType = Record<string | number, any>
 
 export interface FullRequestParams extends Omit<AxiosRequestConfig, 'data' | 'params' | 'url' | 'responseType'> {
@@ -213,9 +194,11 @@ export class HttpClient<SecurityDataType = unknown> {
    * @param {*} config
    */
   protected async refreshToken(config: any) {
-    const token = getToken()
+    const storesUseUserInfo = useUserInfo()
+    const { userInfos } = storeToRefs(storesUseUserInfo)
+    const token = userInfos.value.token
     if (!token) {
-      clearToken()
+      storesUseUserInfo.clear()
       return Promise.reject(config)
     }
 
@@ -243,19 +226,19 @@ export class HttpClient<SecurityDataType = unknown> {
       .then((res) => {
         if (res?.success) {
           const token = res.data.token
-          setToken(token)
+          storesUseUserInfo.setToken(token)
           if (window.requests?.length > 0) {
             window.requests.forEach((apiRequest) => apiRequest())
             window.requests = []
           }
           return this.instance(config)
         } else {
-          clearToken()
+          storesUseUserInfo.clear()
           return Promise.reject(res)
         }
       })
       .catch((error) => {
-        clearToken()
+        storesUseUserInfo.clear()
         return Promise.reject(error)
       })
       .finally(() => {
@@ -352,7 +335,8 @@ export class HttpClient<SecurityDataType = unknown> {
           }
         }
 
-        const accessToken = getToken()
+        const { userInfos } = storeToRefs(useUserInfo())
+        const accessToken = userInfos.value.token
         config.headers!['Authorization'] = `Bearer ${accessToken}`
         return config
       },

src/layout/navBars/breadcrumb/setings.vue

@@ -477,7 +477,7 @@ import Watermark from '/@/utils/watermark'
 import commonFunction from '/@/utils/commonFunction'
 import other from '/@/utils/other'
 import mittBus from '/@/utils/mitt'
-import { getToken, setToken } from '/@/api/admin/http-client'
+import { useUserInfo } from '/@/stores/userInfo'
 
 // 定义变量内容
 // 预定义主要颜色
@@ -735,9 +735,11 @@ const onCopyConfigClick = () => {
 }
 // 一键恢复默认
 const onResetConfigClick = () => {
-  const token = getToken()
+  const storesUseUserInfo = useUserInfo()
+  const { userInfos } = storeToRefs(storesUseUserInfo)
+  const token = userInfos.value.token
   Local.clear()
-  setToken(token)
+  storesUseUserInfo.setToken(token)
   window.location.reload()
   // @ts-ignore
   Local.set('version', __NEXT_VERSION__)

src/layout/navBars/breadcrumb/user.vue

@@ -85,7 +85,6 @@ import { useThemeConfig } from '/@/stores/themeConfig'
 import other from '/@/utils/other'
 import mittBus from '/@/utils/mitt'
 import { Local } from '/@/utils/storage'
-import { clearToken } from '/@/api/admin/http-client'
 
 // 引入组件
 const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/userNews.vue'))
@@ -94,9 +93,9 @@ const Search = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/s
 // 定义变量内容
 const { locale, t } = useI18n()
 const router = useRouter()
-const stores = useUserInfo()
+const storesUseUserInfo = useUserInfo()
 const storesThemeConfig = useThemeConfig()
-const { userInfos } = storeToRefs(stores)
+const { userInfos } = storeToRefs(storesUseUserInfo)
 const { themeConfig } = storeToRefs(storesThemeConfig)
 const searchRef = ref()
 const state = reactive({
@@ -163,7 +162,7 @@ const onHandleCommandClick = (path: string) => {
       },
     })
       .then(async () => {
-        clearToken()
+        storesUseUserInfo.clear()
       })
       .catch(() => {})
   } else if (path === 'wareHouse') {

src/layout/upgrade/index.vue

@@ -37,7 +37,7 @@ import { useI18n } from 'vue-i18n'
 import { storeToRefs } from 'pinia'
 import { useThemeConfig } from '/@/stores/themeConfig'
 import { Local } from '/@/utils/storage'
-import { getToken, setToken } from '/@/api/admin/http-client'
+import { useUserInfo } from '/@/stores/userInfo'
 
 // 定义变量内容
 const { t } = useI18n()
@@ -64,9 +64,11 @@ const onUpgrade = () => {
   state.isLoading = true
   state.btnTxt = t('message.upgrade.btnTwoLoading')
   setTimeout(() => {
-    const token = getToken()
+    const storesUseUserInfo = useUserInfo()
+    const { userInfos } = storeToRefs(storesUseUserInfo)
+    const token = userInfos.value.token
     Local.clear()
-    setToken(token)
+    storesUseUserInfo.setToken(token)
     window.location.reload()
     Local.set('version', state.version)
   }, 2000)

src/router/backEnd.ts

@@ -1,5 +1,5 @@
 import { RouteRecordRaw } from 'vue-router'
-// import { storeToRefs } from 'pinia'
+import { storeToRefs } from 'pinia'
 import pinia from '/@/stores/index'
 import { useUserInfo } from '/@/stores/userInfo'
 import { useRequestOldRoutes } from '/@/stores/requestOldRoutes'
@@ -11,7 +11,6 @@ import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes'
 // import { useMenuApi } from '/@/api/menu/index'
 import { AuthApi } from '/@/api/admin/Auth'
 import { listToTree } from '/@/utils/tree'
-import { getToken } from '/@/api/admin/http-client'
 
 // 后端控制路由
 
@@ -38,8 +37,9 @@ const dynamicViewsModules: Record<string, Function> = Object.assign({}, { ...lay
 export async function initBackEndControlRoutes() {
   // 界面 loading 动画开始执行
   if (window.nextLoading === undefined) NextLoading.start()
+  const { userInfos } = storeToRefs(useUserInfo())
   // 无 token 停止执行下一步
-  if (!getToken()) return false
+  if (!userInfos.value.token) return false
   // 触发初始化用户信息 pinia
   await useUserInfo().setUserInfos()
   // 获取路由菜单数据

src/router/frontEnd.ts

@@ -7,7 +7,6 @@ import { useUserInfo } from '/@/stores/userInfo'
 import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes'
 import { useRoutesList } from '/@/stores/routesList'
 import { NextLoading } from '/@/utils/loading'
-import { getToken } from '/@/api/admin/http-client'
 
 // 前端控制路由
 
@@ -22,7 +21,9 @@ export async function initFrontEndControlRoutes() {
   // 界面 loading 动画开始执行
   if (window.nextLoading === undefined) NextLoading.start()
   // 无 token 停止执行下一步
-  if (!getToken()) return false
+  const stores = useUserInfo(pinia)
+  const { userInfos } = storeToRefs(stores)
+  if (!userInfos.value.token) return false
   // 触发初始化用户信息 pinia
   await useUserInfo(pinia).setUserInfos()
   // 无登录权限时，添加判断

src/router/index.ts

@@ -7,11 +7,11 @@ import { useKeepALiveNames } from '/@/stores/keepAliveNames'
 import { useRoute } from '/@/stores/route'
 import { useRoutesList } from '/@/stores/routesList'
 import { useThemeConfig } from '/@/stores/themeConfig'
-import { Session, Local } from '/@/utils/storage'
+import { Session } from '/@/utils/storage'
 import { staticRoutes, notFoundAndNoPower } from '/@/router/route'
 import { initFrontEndControlRoutes } from '/@/router/frontEnd'
 import { initBackEndControlRoutes } from '/@/router/backEnd'
-import { adminTokenKey, getToken } from '/@/api/admin/http-client'
+import { useUserInfo } from '/@/stores/userInfo'
 import { ElMessage } from 'element-plus'
 
 /**
@@ -96,14 +96,16 @@ export function formatTwoStageRoutes(arr: any) {
 router.beforeEach(async (to, from, next) => {
   NProgress.configure({ showSpinner: false })
   if (to.meta.title) NProgress.start()
-  const token = getToken()
+  const storesUseUserInfo = useUserInfo(pinia)
+  const { userInfos } = storeToRefs(storesUseUserInfo)
+  const token = userInfos.value.token
   if (to.path === '/login' && !token) {
     next()
     NProgress.done()
   } else {
     if (!token) {
       next(`/login?redirect=${to.path}&params=${JSON.stringify(to.query ? to.query : to.params)}`)
-      Local.remove(adminTokenKey)
+      storesUseUserInfo.removeToken()
       Session.clear()
       NProgress.done()
     } else if (token && to.path === '/login') {
@@ -120,7 +122,7 @@ router.beforeEach(async (to, from, next) => {
           const isNoPower = await initBackEndControlRoutes()
           if (isNoPower) {
             ElMessage.warning('抱歉，您没有分配权限，请联系管理员')
-            Local.remove(adminTokenKey)
+            storesUseUserInfo.removeToken()
             Session.clear()
           }
           // 解决刷新时，一直跳 404 页面问题，关联问题 No match found for location with path 'xxx'

src/stores/userInfo.ts

@@ -1,11 +1,9 @@
 import { defineStore } from 'pinia'
-//import Cookies from 'js-cookie'
-import { Session } from '/@/utils/storage'
 import { AuthApi } from '/@/api/admin/Auth'
-import { getToken, clearToken } from '/@/api/admin/http-client'
 import { merge } from 'lodash-es'
+import { Local } from '/@/utils/storage'
 
-const token = getToken()
+export const adminTokenKey = 'admin-token'
 
 /**
  * 用户信息
@@ -14,7 +12,7 @@ const token = getToken()
 export const useUserInfo = defineStore('userInfo', {
   state: (): UserInfosState => ({
     userInfos: {
-      token: token || '',
+      token: Local.get(adminTokenKey) || '',
       userName: '',
       photo: '',
       time: 0,
@@ -24,13 +22,8 @@ export const useUserInfo = defineStore('userInfo', {
   }),
   actions: {
     async setUserInfos() {
-      // 存储用户信息到浏览器缓存
-      if (Session.get('userInfo')) {
-        this.userInfos = Session.get('userInfo')
-      } else {
-        const userInfos: any = await this.getApiUserInfo().catch(() => {})
-        merge(this.userInfos, userInfos)
-      }
+      const userInfos: any = await this.getApiUserInfo().catch(() => {})
+      merge(this.userInfos, userInfos)
     },
     setUserName(userName: string) {
       this.userInfos.userName = userName
@@ -40,6 +33,17 @@ export const useUserInfo = defineStore('userInfo', {
     },
     setToken(token: string) {
       this.userInfos.token = token
+      Local.set(adminTokenKey, token)
+    },
+    removeToken() {
+      this.userInfos.token = ''
+      Local.remove(adminTokenKey)
+    },
+    clear() {
+      this.userInfos.token = ''
+      Local.remove(adminTokenKey)
+      window.requests = []
+      window.location.reload()
     },
     // 模拟接口数据
     async getApiUserInfo() {
@@ -58,7 +62,7 @@ export const useUserInfo = defineStore('userInfo', {
               }
               resolve(userInfos)
             } else {
-              clearToken()
+              this.clear()
             }
           })
           .catch((err) => {

src/utils/request.ts

@@ -2,7 +2,7 @@ import axios, { AxiosInstance, AxiosRequestConfig } from 'axios'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Session, Local } from '/@/utils/storage'
 import qs from 'qs'
-import { adminTokenKey } from '/@/api/admin/http-client'
+import { adminTokenKey } from '/@/stores/userInfo'
 
 // 配置新建一个 axios 实例
 const service: AxiosInstance = axios.create({
@@ -20,8 +20,8 @@ const service: AxiosInstance = axios.create({
 service.interceptors.request.use(
   (config: AxiosRequestConfig) => {
     // 在发送请求之前做些什么 token
-    if (Session.get('token')) {
-      config.headers!['Authorization'] = `${Session.get('token')}`
+    if (Local.get(adminTokenKey)) {
+      config.headers!['Authorization'] = `${Local.get(adminTokenKey)}`
     }
     return config
   },

src/views/admin/file/components/file-upload.vue

@@ -88,7 +88,14 @@ const open = async () => {
 
 //上传失败
 const onError: UploadProps['onError'] = (error) => {
-  const message = (error.message && JSON.parse(error.message)?.msg) || ''
+  let message = ''
+  if (error.message) {
+    try {
+      message = JSON.parse(error.message)?.msg
+    } catch (err) {
+      message = error.message || ''
+    }
+  }
   if (message)
     ElMessage({
       message: message,

src/views/admin/login/component/account.vue

@@ -73,12 +73,12 @@ import { useI18n } from 'vue-i18n'
 // import { useThemeConfig } from '/@/stores/themeConfig'
 // import { initFrontEndControlRoutes } from '/@/router/frontEnd'
 import { initBackEndControlRoutes } from '/@/router/backEnd'
-import { Local, Session } from '/@/utils/storage'
+import { Session } from '/@/utils/storage'
 import { formatAxis } from '/@/utils/formatTime'
 import { NextLoading } from '/@/utils/loading'
 import { AuthApi } from '/@/api/admin/Auth'
 import { AuthLoginInput } from '/@/api/admin/data-contracts'
-import { setToken, adminTokenKey } from '/@/api/admin/http-client'
+import { useUserInfo } from '/@/stores/userInfo'
 
 // 定义变量内容
 const { t } = useI18n()
@@ -114,8 +114,7 @@ const onSignIn = async () => {
   }
 
   const token = res.data?.token
-  setToken(token)
-  Session.set('token', token)
+  useUserInfo().setToken(token)
   // 添加完动态路由，再进行 router 跳转，否则可能报错 No match found for location with path "/"
   const isNoPower = await initBackEndControlRoutes()
   // 执行完 initBackEndControlRoutes，再执行 signInSuccess
@@ -125,7 +124,7 @@ const onSignIn = async () => {
 const signInSuccess = (isNoPower: boolean | undefined) => {
   if (isNoPower) {
     ElMessage.warning('抱歉，您没有分配权限，请联系管理员')
-    Local.remove(adminTokenKey)
+    useUserInfo().removeToken()
     Session.clear()
   } else {
     // 初始化登录成功时间问候语

src/views/error/401.vue

@@ -23,12 +23,12 @@
 </template>
 
 <script setup lang="ts" name="noPower">
-import { Session, Local } from '/@/utils/storage'
-import { adminTokenKey } from '/@/api/admin/http-client'
+import { Session } from '/@/utils/storage'
+import { useUserInfo } from '/@/stores/userInfo'
 
 const onSetAuth = () => {
   // 清除缓存/token等
-  Local.remove(adminTokenKey)
+  useUserInfo().removeToken()
   Session.clear()
   // 使用 reload 时，不需要调用 resetRoute() 重置路由
   window.location.reload()

src/views/example/login/component/account.vue

@@ -65,9 +65,10 @@ import { storeToRefs } from 'pinia'
 import { useThemeConfig } from '/@/stores/themeConfig'
 import { initFrontEndControlRoutes } from '/@/router/frontEnd'
 import { initBackEndControlRoutes } from '/@/router/backEnd'
-import { Session } from '/@/utils/storage'
 import { formatAxis } from '/@/utils/formatTime'
 import { NextLoading } from '/@/utils/loading'
+import { useUserInfo } from '/@/stores/userInfo'
+import { Session } from '/@/utils/storage'
 
 // 定义变量内容
 const { t } = useI18n()
@@ -95,7 +96,7 @@ const currentTime = computed(() => {
 const onSignIn = async () => {
   state.loading.signIn = true
   // 存储 token 到浏览器缓存
-  Session.set('token', Math.random().toString(36).substr(0))
+  useUserInfo().setToken(Math.random().toString(36).substr(0))
   // 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
   Cookies.set('userName', state.ruleForm.userName)
   if (!themeConfig.value.isRequestRoutes) {