From b33cb9e353b7a72e7b4eda0cac478ba64bb1734d Mon Sep 17 00:00:00 2001 From: Coffee-crocodile <1147347984@qq.com> Date: Thu, 12 Jan 2023 16:45:11 +0800 Subject: [PATCH] =?UTF-8?q?feat(service.utils):=20=E5=AE=8C=E5=96=84axiso?= =?UTF-8?q?=E5=A4=84=E7=90=86=E6=B5=81=E7=A8=8B=EF=BC=8Cloacal=E5=AD=98?= =?UTF-8?q?=E5=82=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- mock/module/user.ts | 802 ++++++++++--------- src/App.vue | 8 +- src/components/common/appLoading.vue | 9 +- src/config/service.ts | 23 + src/enum/common.ts | 14 +- src/layouts/components/header/UserCenter.vue | 50 +- src/service/api/login.ts | 13 +- src/service/api/test.ts | 33 +- src/service/http/handle.ts | 82 +- src/service/http/instance.ts | 66 +- src/store/modules/auth.ts | 165 ++-- src/typings/business.d.ts | 103 +-- src/typings/system.d.ts | 61 +- src/utils/auth.ts | 32 +- src/utils/storage.ts | 117 +-- src/views/dashboard/workbench/index.vue | 283 +++++-- src/views/test/test1/index.vue | 205 ++++- 17 files changed, 1285 insertions(+), 781 deletions(-) diff --git a/mock/module/user.ts b/mock/module/user.ts index 24c246c..6b20150 100644 --- a/mock/module/user.ts +++ b/mock/module/user.ts @@ -3,408 +3,416 @@ import { resultSuccess } from '../utils'; const Random = Mock.Random; -const token = Random.string('upper', 32, 32); +const token = () => Random.string('upper', 32, 32); const userInfo = { - userId: '1', - userName: 'admin', - realName: '管理员大人', - avatar: 'https://z3.ax1x.com/2021/10/29/5jnWgf.jpg', - role: 'admin', - password: '123456', + userId: '1', + userName: 'admin', + realName: '管理员大人', + avatar: 'https://z3.ax1x.com/2021/10/29/5jnWgf.jpg', + role: 'admin', + password: '123456', }; const userRoutes = [ - { - name: 'dashboard', - path: '/dashboard', - redirect: '/dashboard/workbench', - meta: { - title: '仪表盘', - requiresAuth: true, - icon: 'icon-park-outline:analysis', - }, - children: [ - { - name: 'dashboard_workbench', - path: '/dashboard/workbench', - meta: { - title: '工作台', - requiresAuth: true, - icon: 'icon-park-outline:alarm', - }, - }, - { - name: 'dashboard_monitor', - path: '/dashboard/monitor', - meta: { - title: '监控页', - requiresAuth: true, - icon: 'icon-park-outline:anchor', - }, - }, - ], - }, - { - name: 'test', - path: '/test', - redirect: '/test/test1', - meta: { - title: '多级菜单演示', - requiresAuth: true, - icon: 'icon-park-outline:list', - }, - children: [ - { - name: 'test1', - path: '/test/test1', - meta: { - title: '多级菜单1', - requiresAuth: true, - icon: 'icon-park-outline:list', - }, - }, - { - name: 'test2', - path: '/test/test2', - meta: { - title: '多级菜单2', - requiresAuth: true, - icon: 'icon-park-outline:list', - }, - children: [ - { - name: 'test2_detail', - path: '/test/test2/detail', - meta: { - title: '多级菜单2的详情页', - requiresAuth: true, - icon: 'icon-park-outline:list', - hide: true, - activeMenu: '/test/test2', - }, - }, - ], - }, - { - name: 'test3', - path: '/test/test3', - meta: { - title: '多级菜单3', - requiresAuth: true, - icon: 'icon-park-outline:list', - }, - children: [ - { - name: 'test4', - path: '/test/test3/test4', - meta: { - title: '多级菜单3-1', - requiresAuth: true, - icon: 'icon-park-outline:list', - }, - }, - ], - }, - ], - }, - { - name: 'list', - path: '/list', - redirect: '/list/commonList', - meta: { - title: '列表页', - requiresAuth: true, - icon: 'icon-park-outline:list-two', - }, - children: [ - { - name: 'list_commonList', - path: '/list/commonList', - meta: { - title: '常用列表', - requiresAuth: true, - icon: 'icon-park-outline:list-view', - }, - }, - { - name: 'list_cardList', - path: '/list/cardList', - meta: { - title: '卡片列表', - requiresAuth: true, - icon: 'icon-park-outline:view-grid-list', - }, - }, - ], - }, - { - name: 'plugin', - path: '/plugin', - redirect: '/plugin/charts', - meta: { - title: '组件示例', - requiresAuth: true, - icon: 'icon-park-outline:application-one', - }, - children: [ - { - name: 'plugin_charts', - path: '/plugin/charts', - meta: { - title: '图表', - requiresAuth: true, - icon: 'icon-park-outline:chart-line', - }, - children: [ - { - name: 'plugin_echarts', - path: '/plugin/charts/echarts', - meta: { - title: 'ECharts', - requiresAuth: true, - icon: 'icon-park-outline:chart-proportion', - }, - }, - { - name: 'plugin_antV', - path: '/plugin/charts/antV', - meta: { - title: 'antV', - requiresAuth: true, - icon: 'ant-design:ant-design-outlined', - }, - }, - ], - }, - { - name: 'plugin_map', - path: '/plugin/map', - meta: { - title: '地图', - requiresAuth: true, - icon: 'carbon:map', - keepAlive: true, - }, - }, - { - name: 'plugin_editor', - path: '/plugin/editor', - meta: { - title: '编辑器', - requiresAuth: true, - icon: 'icon-park-outline:editor', - }, - children: [ - { - name: 'plugin_md', - path: '/plugin/editor/md', - meta: { - title: 'MarkDown', - requiresAuth: true, - icon: 'ri:markdown-line', - }, - }, - { - name: 'plugin_rich', - path: '/plugin/editor/rich', - meta: { - title: '富文本', - requiresAuth: true, - icon: 'icon-park-outline:edit-one', - }, - }, - ], - }, - { - name: 'plugin_clipboard', - path: '/plugin/clipboard', - meta: { - title: '剪贴板', - requiresAuth: true, - icon: 'icon-park-outline:clipboard', - }, - }, - { - name: 'plugin_icons', - path: '/plugin/icons', - meta: { - title: '图标', - requiresAuth: true, - icon: 'icon-park-outline:winking-face-with-open-eyes', - }, - }, - { - name: 'plugin_QRCode', - path: '/plugin/QRCode', - meta: { - title: '二维码', - requiresAuth: true, - icon: 'icon-park-outline:two-dimensional-code', - }, - }, - ], - }, - { - name: 'docments', - path: '/docments', - redirect: '/docments/not-found', - meta: { - title: '外链文档', - requiresAuth: true, - icon: 'icon-park-outline:file-doc', - }, - children: [ - { - name: 'docments_vue', - path: '/docments/vue', - meta: { - title: 'vue', - requiresAuth: true, - icon: 'logos:vue', - }, - }, - { - name: 'docments_vite', - path: '/docments/vite', - meta: { - title: 'vite', - requiresAuth: true, - icon: 'logos:vitejs', - }, - }, - { - name: 'docments_vueuse', - path: '/docments/vueuse', - meta: { - title: 'VueUse（外链）', - requiresAuth: true, - icon: 'logos:vueuse', - herf: 'https://vueuse.org/guide/', - }, - }, - ], - }, - { - name: 'error', - path: '/error', - redirect: '/error/not-found', - meta: { - title: '异常页', - requiresAuth: true, - icon: 'icon-park-outline:error-computer', - }, - children: [ - { - name: 'not-found', - path: '/error/not-found', - meta: { - title: '404页', - requiresAuth: true, - icon: 'icon-park-outline:error', - }, - }, - { - name: 'not-permission', - path: '/error/not-permission', - meta: { - title: '403页', - requiresAuth: true, - icon: 'carbon:error', - }, - }, - { - name: 'service-error', - path: '/error/service-error', - meta: { - title: '500页', - requiresAuth: true, - icon: 'carbon:data-error', - }, - }, - ], - }, - { - name: 'setting', - path: '/setting', - redirect: '/setting/account', - meta: { - title: '系统设置', - requiresAuth: true, - icon: 'icon-park-outline:setting', - }, - children: [ - { - name: 'setting_account', - path: '/setting/account', - meta: { - title: '用户设置', - requiresAuth: true, - icon: 'icon-park-outline:user', - }, - }, - { - name: 'setting_dictionary', - path: '/setting/dictionary', - meta: { - title: '字典设置', - requiresAuth: true, - icon: 'icon-park-outline:book-one', - }, - }, - { - name: 'setting_menu', - path: '/setting/menu', - meta: { - title: '菜单设置', - requiresAuth: true, - icon: 'icon-park-outline:application-menu', - }, - }, - { - name: 'setting_system', - path: '/setting/system', - meta: { - title: '系统配置', - requiresAuth: true, - icon: 'icon-park-outline:coordinate-system', - }, - }, - ], - }, - { - name: 'about', - path: '/about', - meta: { - title: '关于', - requiresAuth: true, - icon: 'icon-park-outline:info', - }, - }, + { + name: 'dashboard', + path: '/dashboard', + redirect: '/dashboard/workbench', + meta: { + title: '仪表盘', + requiresAuth: true, + icon: 'icon-park-outline:analysis', + }, + children: [ + { + name: 'dashboard_workbench', + path: '/dashboard/workbench', + meta: { + title: '工作台', + requiresAuth: true, + icon: 'icon-park-outline:alarm', + }, + }, + { + name: 'dashboard_monitor', + path: '/dashboard/monitor', + meta: { + title: '监控页', + requiresAuth: true, + icon: 'icon-park-outline:anchor', + }, + }, + ], + }, + { + name: 'test', + path: '/test', + redirect: '/test/test1', + meta: { + title: '多级菜单演示', + requiresAuth: true, + icon: 'icon-park-outline:list', + }, + children: [ + { + name: 'test1', + path: '/test/test1', + meta: { + title: '多级菜单1', + requiresAuth: true, + icon: 'icon-park-outline:list', + }, + }, + { + name: 'test2', + path: '/test/test2', + meta: { + title: '多级菜单2', + requiresAuth: true, + icon: 'icon-park-outline:list', + }, + children: [ + { + name: 'test2_detail', + path: '/test/test2/detail', + meta: { + title: '多级菜单2的详情页', + requiresAuth: true, + icon: 'icon-park-outline:list', + hide: true, + activeMenu: '/test/test2', + }, + }, + ], + }, + { + name: 'test3', + path: '/test/test3', + meta: { + title: '多级菜单3', + requiresAuth: true, + icon: 'icon-park-outline:list', + }, + children: [ + { + name: 'test4', + path: '/test/test3/test4', + meta: { + title: '多级菜单3-1', + requiresAuth: true, + icon: 'icon-park-outline:list', + }, + }, + ], + }, + ], + }, + { + name: 'list', + path: '/list', + redirect: '/list/commonList', + meta: { + title: '列表页', + requiresAuth: true, + icon: 'icon-park-outline:list-two', + }, + children: [ + { + name: 'list_commonList', + path: '/list/commonList', + meta: { + title: '常用列表', + requiresAuth: true, + icon: 'icon-park-outline:list-view', + }, + }, + { + name: 'list_cardList', + path: '/list/cardList', + meta: { + title: '卡片列表', + requiresAuth: true, + icon: 'icon-park-outline:view-grid-list', + }, + }, + ], + }, + { + name: 'plugin', + path: '/plugin', + redirect: '/plugin/charts', + meta: { + title: '组件示例', + requiresAuth: true, + icon: 'icon-park-outline:application-one', + }, + children: [ + { + name: 'plugin_charts', + path: '/plugin/charts', + meta: { + title: '图表', + requiresAuth: true, + icon: 'icon-park-outline:chart-line', + }, + children: [ + { + name: 'plugin_echarts', + path: '/plugin/charts/echarts', + meta: { + title: 'ECharts', + requiresAuth: true, + icon: 'icon-park-outline:chart-proportion', + }, + }, + { + name: 'plugin_antV', + path: '/plugin/charts/antV', + meta: { + title: 'antV', + requiresAuth: true, + icon: 'ant-design:ant-design-outlined', + }, + }, + ], + }, + { + name: 'plugin_map', + path: '/plugin/map', + meta: { + title: '地图', + requiresAuth: true, + icon: 'carbon:map', + keepAlive: true, + }, + }, + { + name: 'plugin_editor', + path: '/plugin/editor', + meta: { + title: '编辑器', + requiresAuth: true, + icon: 'icon-park-outline:editor', + }, + children: [ + { + name: 'plugin_md', + path: '/plugin/editor/md', + meta: { + title: 'MarkDown', + requiresAuth: true, + icon: 'ri:markdown-line', + }, + }, + { + name: 'plugin_rich', + path: '/plugin/editor/rich', + meta: { + title: '富文本', + requiresAuth: true, + icon: 'icon-park-outline:edit-one', + }, + }, + ], + }, + { + name: 'plugin_clipboard', + path: '/plugin/clipboard', + meta: { + title: '剪贴板', + requiresAuth: true, + icon: 'icon-park-outline:clipboard', + }, + }, + { + name: 'plugin_icons', + path: '/plugin/icons', + meta: { + title: '图标', + requiresAuth: true, + icon: 'icon-park-outline:winking-face-with-open-eyes', + }, + }, + { + name: 'plugin_QRCode', + path: '/plugin/QRCode', + meta: { + title: '二维码', + requiresAuth: true, + icon: 'icon-park-outline:two-dimensional-code', + }, + }, + ], + }, + { + name: 'docments', + path: '/docments', + redirect: '/docments/not-found', + meta: { + title: '外链文档', + requiresAuth: true, + icon: 'icon-park-outline:file-doc', + }, + children: [ + { + name: 'docments_vue', + path: '/docments/vue', + meta: { + title: 'vue', + requiresAuth: true, + icon: 'logos:vue', + }, + }, + { + name: 'docments_vite', + path: '/docments/vite', + meta: { + title: 'vite', + requiresAuth: true, + icon: 'logos:vitejs', + }, + }, + { + name: 'docments_vueuse', + path: '/docments/vueuse', + meta: { + title: 'VueUse（外链）', + requiresAuth: true, + icon: 'logos:vueuse', + herf: 'https://vueuse.org/guide/', + }, + }, + ], + }, + { + name: 'error', + path: '/error', + redirect: '/error/not-found', + meta: { + title: '异常页', + requiresAuth: true, + icon: 'icon-park-outline:error-computer', + }, + children: [ + { + name: 'not-found', + path: '/error/not-found', + meta: { + title: '404页', + requiresAuth: true, + icon: 'icon-park-outline:error', + }, + }, + { + name: 'not-permission', + path: '/error/not-permission', + meta: { + title: '403页', + requiresAuth: true, + icon: 'carbon:error', + }, + }, + { + name: 'service-error', + path: '/error/service-error', + meta: { + title: '500页', + requiresAuth: true, + icon: 'carbon:data-error', + }, + }, + ], + }, + { + name: 'setting', + path: '/setting', + redirect: '/setting/account', + meta: { + title: '系统设置', + requiresAuth: true, + icon: 'icon-park-outline:setting', + }, + children: [ + { + name: 'setting_account', + path: '/setting/account', + meta: { + title: '用户设置', + requiresAuth: true, + icon: 'icon-park-outline:user', + }, + }, + { + name: 'setting_dictionary', + path: '/setting/dictionary', + meta: { + title: '字典设置', + requiresAuth: true, + icon: 'icon-park-outline:book-one', + }, + }, + { + name: 'setting_menu', + path: '/setting/menu', + meta: { + title: '菜单设置', + requiresAuth: true, + icon: 'icon-park-outline:application-menu', + }, + }, + { + name: 'setting_system', + path: '/setting/system', + meta: { + title: '系统配置', + requiresAuth: true, + icon: 'icon-park-outline:coordinate-system', + }, + }, + ], + }, + { + name: 'about', + path: '/about', + meta: { + title: '关于', + requiresAuth: true, + icon: 'icon-park-outline:info', + }, + }, ]; export default [ - { - url: '/mock/login', - timeout: 1000, - method: 'post', - response: () => { - return resultSuccess({ token }); - }, - }, - { - url: '/mock/getUserInfo', - timeout: 1000, - method: 'get', - response: () => { - return resultSuccess(userInfo); - }, - }, - { - url: '/mock/getUserRoutes', - timeout: 1000, - method: 'post', - response: () => { - return resultSuccess(userRoutes); - }, - }, + { + url: '/mock/login', + timeout: 1000, + method: 'post', + response: () => { + return resultSuccess({ token: token(), refreshToken: token() }); + }, + }, + { + url: '/mock/updateToken', + timeout: 1000, + method: 'post', + response: () => { + return resultSuccess({ token: token(), refreshToken: token() }); + }, + }, + { + url: '/mock/getUserInfo', + timeout: 1000, + method: 'get', + response: () => { + return resultSuccess(userInfo); + }, + }, + { + url: '/mock/getUserRoutes', + timeout: 1000, + method: 'post', + response: () => { + return resultSuccess(userRoutes); + }, + }, ]; diff --git a/src/App.vue b/src/App.vue index c8e0083..96b610a 100644 --- a/src/App.vue +++ b/src/App.vue @@ -12,13 +12,7 @@ diff --git a/src/service/api/login.ts b/src/service/api/login.ts index 13aeed2..f54ec3d 100644 --- a/src/service/api/login.ts +++ b/src/service/api/login.ts @@ -1,15 +1,18 @@ import { mockRequest } from '../http'; interface Ilogin { - userName: string; - password: string; + userName: string; + password: string; } export function fetchLogin(params: Ilogin) { - return mockRequest.post('/login', params); + return mockRequest.post('/login', params); +} +export function fetchUpdateToken(params: string) { + return mockRequest.post('/updateToken', params); } export function fetchUserInfo() { - return mockRequest.get('/getUserInfo'); + return mockRequest.get('/getUserInfo'); } export function fetchUserRoutes(params: string) { - return mockRequest.post('/getUserRoutes', params); + return mockRequest.post('/getUserRoutes', params); } diff --git a/src/service/api/test.ts b/src/service/api/test.ts index 0dff09a..97c282a 100644 --- a/src/service/api/test.ts +++ b/src/service/api/test.ts @@ -2,29 +2,48 @@ import { request } from '../http'; import { mockRequest } from '../http'; interface Itest { - data: string; + data: string; } /* get方法测试 */ export function fetachGet() { - return request.get('/getAPI'); + return request.get('/getAPI'); } /* post方法测试 */ export function fetachPost(params: Itest) { - return request.post('/postAPI', params); + return request.post('/postAPI', params); } /* delete方法测试 */ export function fetachDelete() { - return request.Delete('/deleteAPI'); + return request.Delete('/deleteAPI'); } /* put方法测试 */ export function fetachPut(params: Itest) { - return request.put('/putAPI', params); + return request.put('/putAPI', params); } /* patch方法测试 */ export function fetachPatch(params: Itest) { - return request.patch('/patchAPI', params); + return request.patch('/patchAPI', params); } + +/* 测试状态码500失败 */ +export function testFailedRequest() { + return request.get('/filedRequest'); +} + +/* 测试业务码500失败 */ +export function testFailedResponse() { + return request.get('/filedResponse'); +} +/* 测试token刷新接口 */ +export function testUpdataToken() { + return request.get('/updataToken'); +} +/* 测试token刷新接口 */ +export function testFailedResponse_NT() { + return request.get('/failedResponse_NT'); +} + /* mock方法测试 */ export function fetchMock() { - return mockRequest.post('/login'); + return mockRequest.post('/login'); } diff --git a/src/service/http/handle.ts b/src/service/http/handle.ts index f0779b7..553c049 100644 --- a/src/service/http/handle.ts +++ b/src/service/http/handle.ts @@ -1,5 +1,6 @@ -import type { AxiosResponse, AxiosError } from 'axios'; +import type { AxiosResponse, AxiosError, AxiosRequestConfig } from 'axios'; import { + ERROR_MSG_DURATION, DEFAULT_REQUEST_ERROR_CODE, DEFAULT_REQUEST_ERROR_MSG, NETWORK_ERROR_CODE, @@ -7,15 +8,22 @@ import { REQUEST_TIMEOUT_CODE, REQUEST_TIMEOUT_MSG, ERROR_STATUS, + ERROR_NO_TIP_STATUS, } from '@/config'; +import { useAuthStore } from '@/store'; +import { getRefreshToken } from '@/utils'; +import { fetchUpdateToken } from '@/service'; +import { setToken, setRefreshToken } from '@/utils'; + type ErrorStatus = keyof typeof ERROR_STATUS; + /** * @description: 处理axios或http错误 * @param {AxiosError} err * @return {*} */ export function handleAxiosError(err: AxiosError) { - const error = { + const error: Service.RequestError = { type: 'Axios', code: DEFAULT_REQUEST_ERROR_CODE, msg: DEFAULT_REQUEST_ERROR_MSG, @@ -38,6 +46,8 @@ export function handleAxiosError(err: AxiosError) { Object.assign(error, { code: errorCode, msg }); } + showError(error); + return error; } @@ -47,7 +57,7 @@ export function handleAxiosError(err: AxiosError) { * @return {*} */ export function handleResponseError(response: AxiosResponse) { - const error = { + const error: Service.RequestError = { type: 'Axios', code: DEFAULT_REQUEST_ERROR_CODE, msg: DEFAULT_REQUEST_ERROR_MSG, @@ -63,6 +73,8 @@ export function handleResponseError(response: AxiosResponse) { Object.assign(error, { type: 'Response', code: errorCode, msg }); } + showError(error); + return error; } @@ -72,13 +84,69 @@ export function handleResponseError(response: AxiosResponse) { * @param {Service} config axios字段配置 * @return {*} */ -export function handleBusinessError(apiData: Record, config: Service.BackendResultConfig) { +export function handleBusinessError(data: Record, config: Service.BackendResultConfig) { const { codeKey, msgKey } = config; - const error = { + const error: Service.RequestError = { type: 'Business', - code: apiData[codeKey], - msg: apiData[msgKey], + code: data[codeKey], + msg: data[msgKey], }; + showError(error); + return error; } + +/** + * @description: 统一成功和失败返回类型 + * @param {any} data + * @param {Service} error + * @return {*} result + */ +export async function handleServiceResult(data: any, error: Service.RequestError | null) { + if (error) { + const fail: Service.FailedResult = { + error, + data: null, + }; + return fail; + } + const success: Service.SuccessResult = { + error: null, + data, + }; + return success; +} + +/** + * @description: 处理接口token刷新 + * @param {AxiosRequestConfig} config axios字段配置 + * @return {*} + */ +export async function handleRefreshToken(config: AxiosRequestConfig) { + const { resetAuthStore } = useAuthStore(); + const refreshToken = getRefreshToken(); + const { data } = await fetchUpdateToken(refreshToken); + if (data) { + setRefreshToken(data.token); + setToken(data.refreshToken); + + // 设置token + if (config.headers) { + typeof config.headers.set === 'function' && config.headers.set('Authorization', `Bearer ${data.token || ''}`); + } + + return config; + } + resetAuthStore(); + return null; +} + +export function showError(error: Service.RequestError) { + // 如果error不需要提示,则跳过 + const code = Number(error.code); + if (ERROR_NO_TIP_STATUS.includes(code)) return; + + window.console.warn(error.code, error.msg); + window.$message?.error(error.msg, { duration: ERROR_MSG_DURATION }); +} diff --git a/src/service/http/instance.ts b/src/service/http/instance.ts index c18a591..c144122 100644 --- a/src/service/http/instance.ts +++ b/src/service/http/instance.ts @@ -1,7 +1,16 @@ import axios from 'axios'; -import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'; +import type { AxiosInstance, AxiosRequestConfig, AxiosError } from 'axios'; import { getToken } from '@/utils'; -import { handleAxiosError, handleResponseError, handleBusinessError } from './handle'; +import { REFRESH_TOKEN_CODE } from '@/config'; +import { + handleAxiosError, + handleResponseError, + handleBusinessError, + handleServiceResult, + handleRefreshToken, +} from './handle'; + +import { DEFAULT_AXIOS_OPTIONS, DEFAULT_BACKEND_OPTIONS } from '@/config'; /** * @description: 封装axios请求类 @@ -14,26 +23,16 @@ export default class createAxiosInstance { // 基础配置 axiosConfig: AxiosRequestConfig = {}; - constructor( - axiosConfig: AxiosRequestConfig, - backendConfig: Service.BackendResultConfig = { - codeKey: 'code', - dataKey: 'data', - msgKey: 'msg', - successCode: '200', - } - ) { - this.backendConfig = backendConfig; + constructor(axiosConfig: AxiosRequestConfig, backendConfig: Service.BackendResultConfig) { // 设置了axios实例上的一些默认配置,新配置会覆盖默认配置 - this.instance = axios.create({ timeout: 60000, ...axiosConfig }); - + this.instance = axios.create({ ...DEFAULT_AXIOS_OPTIONS, ...axiosConfig }); + this.backendConfig = { ...DEFAULT_BACKEND_OPTIONS, ...backendConfig }; this.setInterceptor(); } - // 设置类拦截器的函数 setInterceptor() { this.instance.interceptors.request.use( - async (config) => { + (config) => { const handleConfig = { ...config }; if (handleConfig.headers) { // 设置token @@ -42,36 +41,41 @@ export default class createAxiosInstance { } return handleConfig; }, - (axiosError: AxiosError) => { - const error = handleAxiosError(axiosError); - Promise.reject(error); + (error: AxiosError) => { + const errorResult = handleAxiosError(error); + return handleServiceResult(null, errorResult); } ); this.instance.interceptors.response.use( - async (response) => { + async (response): Promise => { const { status } = response; if (status === 200) { // 获取返回的数据 const apiData = response.data; - const { codeKey, successCode } = this.backendConfig; + const { codeKey, successCode, dataKey } = this.backendConfig; // 请求成功 if (apiData[codeKey] == successCode) { - // return apiData[dataKey]; - return apiData; + return handleServiceResult(apiData[dataKey], null); + } + // token失效, 刷新token + if (REFRESH_TOKEN_CODE.includes(apiData[codeKey])) { + const config = await handleRefreshToken(response.config); + if (config) { + return this.instance.request(config); + } } - //TODO 添加刷新token的操作 // 业务请求失败 - const error = handleBusinessError(apiData, this.backendConfig); - return Promise.reject(error); + const errorResult = handleBusinessError(apiData, this.backendConfig); + return handleServiceResult(null, errorResult); } // 接口请求失败 - const error = handleResponseError(response); - return Promise.reject(error); + const errorResult = handleResponseError(response); + return handleServiceResult(null, errorResult); }, - (axiosError: AxiosError) => { + (error: AxiosError) => { // 处理http常见错误，进行全局提示等 - const error = handleAxiosError(axiosError); - return Promise.reject(error); + const errorResult = handleAxiosError(error); + return handleServiceResult(null, errorResult); } ); } diff --git a/src/store/modules/auth.ts b/src/store/modules/auth.ts index ed2a53e..88477c6 100644 --- a/src/store/modules/auth.ts +++ b/src/store/modules/auth.ts @@ -1,101 +1,102 @@ import { defineStore } from 'pinia'; import { fetchLogin, fetchUserInfo } from '@/service'; -import { setUserInfo, getUserInfo, getToken, setToken, clearAuthStorage } from '@/utils/auth'; +import { setUserInfo, getUserInfo, getToken, setToken, clearAuthStorage, setRefreshToken } from '@/utils/auth'; import { router } from '@/router'; import { useAppRouter } from '@/hooks'; import { unref } from 'vue'; import { useRouteStore } from './route'; export const useAuthStore = defineStore('auth-store', { - state: () => { - return { - userInfo: getUserInfo(), - token: getToken(), - loginLoading: false, - }; - }, - getters: { - /** 是否登录 */ - isLogin(state) { - return Boolean(state.token); - }, - }, - actions: { - /* 登录退出，重置用户信息等 */ - resetAuthStore() { - const route = unref(router.currentRoute); - const { toLogin } = useAppRouter(false); - const { resetRouteStore } = useRouteStore(); - // 清除本地缓存 - clearAuthStorage(); - // 清空路由、菜单等数据 - resetRouteStore(); - this.$reset(); - if (route.meta.requiresAuth) { - toLogin(); - } - }, + state: () => { + return { + userInfo: getUserInfo(), + token: getToken(), + loginLoading: false, + }; + }, + getters: { + /** 是否登录 */ + isLogin(state) { + return Boolean(state.token); + }, + }, + actions: { + /* 登录退出，重置用户信息等 */ + resetAuthStore() { + const route = unref(router.currentRoute); + const { toLogin } = useAppRouter(false); + const { resetRouteStore } = useRouteStore(); + // 清除本地缓存 + clearAuthStorage(); + // 清空路由、菜单等数据 + resetRouteStore(); + this.$reset(); + if (route.meta.requiresAuth) { + toLogin(); + } + }, - /* 用户登录 */ - async login(userName: string, password: string) { - this.loginLoading = true; - const { data } = await fetchLogin({ userName, password }); - // 处理登录信息 - await this.handleAfterLogin(data); + /* 用户登录 */ + async login(userName: string, password: string) { + this.loginLoading = true; + const { data } = await fetchLogin({ userName, password }); + // 处理登录信息 + await this.handleAfterLogin(data); - this.loginLoading = false; - }, + this.loginLoading = false; + }, - /* 登录后的处理函数 */ - async handleAfterLogin(data: Auth.loginToken) { - // 将token和userInfo保存下来 - const catchSuccess = await this.catchUserInfo(data); + /* 登录后的处理函数 */ + async handleAfterLogin(data: Auth.loginToken) { + // 将token和userInfo保存下来 + const catchSuccess = await this.catchUserInfo(data); - // 添加路由和菜单 - const { initAuthRoute } = useRouteStore(); - await initAuthRoute(); + // 添加路由和菜单 + const { initAuthRoute } = useRouteStore(); + await initAuthRoute(); - // 登录写入信息成功 - if (catchSuccess) { - // 进行重定向跳转 - const { toLoginRedirect } = useAppRouter(false); - toLoginRedirect(); + // 登录写入信息成功 + if (catchSuccess) { + // 进行重定向跳转 + const { toLoginRedirect } = useAppRouter(false); + toLoginRedirect(); - // 触发用户提示 - window.$notification?.success({ - title: '登录成功!', - content: `欢迎回来😊，${this.userInfo.realName}!`, - duration: 3000, - }); - return; - } - // 如果不成功则重置存储 - this.resetAuthStore(); - // 登录失败提示 - window.$notification?.error({ - title: '登录失败!', - content: `验证失败，请检查账号密码`, - duration: 3000, - }); - }, + // 触发用户提示 + window.$notification?.success({ + title: '登录成功!', + content: `欢迎回来😊，${this.userInfo.realName}!`, + duration: 3000, + }); + return; + } + // 如果不成功则重置存储 + this.resetAuthStore(); + // 登录失败提示 + window.$notification?.error({ + title: '登录失败!', + content: `验证失败，请检查账号密码`, + duration: 3000, + }); + }, - /* 缓存用户信息 */ - async catchUserInfo(userToken: Auth.loginToken) { - let catchSuccess = false; - // 先存储token - const { token } = userToken; - setToken(token); + /* 缓存用户信息 */ + async catchUserInfo(userToken: Auth.loginToken) { + let catchSuccess = false; + // 先存储token + const { token, refreshToken } = userToken; + setToken(token); + setRefreshToken(refreshToken); - // 请求/存储用户信息 - const { data } = await fetchUserInfo(); - setUserInfo(data); - // 再将token和userInfo初始化 - this.userInfo = data; - this.token = token; + // 请求/存储用户信息 + const { data } = await fetchUserInfo(); + setUserInfo(data); + // 再将token和userInfo初始化 + this.userInfo = data; + this.token = token; - catchSuccess = true; + catchSuccess = true; - return catchSuccess; - }, - }, + return catchSuccess; + }, + }, }); diff --git a/src/typings/business.d.ts b/src/typings/business.d.ts index 4d31cc9..d67298f 100644 --- a/src/typings/business.d.ts +++ b/src/typings/business.d.ts @@ -1,62 +1,63 @@ /** 用户相关模块 */ declare namespace Auth { - /** - * 用户角色类型(前端静态路由用角色类型进行路由权限的控制) - * - super: 超级管理员(该权限具有所有路由数据) - * - admin: 管理员 - * - user: 用户 - * - custom: 自定义角色 - */ + /** + * 用户角色类型(前端静态路由用角色类型进行路由权限的控制) + * - super: 超级管理员(该权限具有所有路由数据) + * - admin: 管理员 + * - user: 用户 + * - custom: 自定义角色 + */ - /** 用户信息 */ - interface loginToken { - token: string; - } + /** 用户信息 */ + interface loginToken { + token: string; + refreshToken: string; + } - interface UserInfo { - /** 用户id */ - userId: string; - /** 用户名 */ - userName: string; - /* 用户称呼 */ - realName: string; - /* 用户头像 */ - avatar: string; - /** 用户角色类型 */ - role: RoleType; - /* 密码 */ - password: string; - } + interface UserInfo { + /** 用户id */ + userId: string; + /** 用户名 */ + userName: string; + /* 用户称呼 */ + realName: string; + /* 用户头像 */ + avatar: string; + /** 用户角色类型 */ + role: RoleType; + /* 密码 */ + password: string; + } } /* 系统消息 */ declare namespace Message { - interface Tab { - key: number; - name: string; - badgeProps?: import('naive-ui').BadgeProps; - list: List[]; - } - interface List { - id: number; - title: string; - icon: string; - tagTitle?: string; - tagType?: 'error' | 'info' | 'success' | 'warning'; - description?: string; - isRead?: boolean; - date: string; - } + interface Tab { + key: number; + name: string; + badgeProps?: import('naive-ui').BadgeProps; + list: List[]; + } + interface List { + id: number; + title: string; + icon: string; + tagTitle?: string; + tagType?: 'error' | 'info' | 'success' | 'warning'; + description?: string; + isRead?: boolean; + date: string; + } } declare namespace CommonList { - interface UserList { - id: number; - name: string; - age: number; - gender: '0' | '1' | null; - email: string; - address: string; - role: 'super' | 'admin' | 'user'; - disabled: boolean; - } + interface UserList { + id: number; + name: string; + age: number; + gender: '0' | '1' | null; + email: string; + address: string; + role: 'super' | 'admin' | 'user'; + disabled: boolean; + } } diff --git a/src/typings/system.d.ts b/src/typings/system.d.ts index 5890ef9..c8c127b 100644 --- a/src/typings/system.d.ts +++ b/src/typings/system.d.ts @@ -1,21 +1,52 @@ /** 请求的相关类型 */ declare namespace Service { - /** 后端接口返回的数据结构配置 */ - interface BackendResultConfig { - /** 表示后端请求状态码的属性字段 */ - codeKey: string; - /** 表示后端请求数据的属性字段 */ - dataKey: string; - /** 表示后端消息的属性字段 */ - msgKey: string; - /** 后端业务上定义的成功请求的状态 */ - successCode: number | string; - } + /** 后端接口返回的数据结构配置 */ + interface BackendResultConfig { + /** 表示后端请求状态码的属性字段 */ + codeKey: string; + /** 表示后端请求数据的属性字段 */ + dataKey: string; + /** 表示后端消息的属性字段 */ + msgKey: string; + /** 后端业务上定义的成功请求的状态 */ + successCode: number | string; + } + + type RequestErrorType = 'Axios' | 'Response' | 'Business'; + type RequestCode = string | number; + + interface RequestError { + /** 请求服务的错误类型 */ + type: RequestErrorType; + /** 错误码 */ + code: RequestCode; + /** 错误信息 */ + msg: string; + } + + /** 自定义的请求成功结果 */ + interface SuccessResult { + /** 请求错误 */ + error: null; + /** 请求数据 */ + data: T; + } + + /** 自定义的请求失败结果 */ + interface FailedResult { + /** 请求错误 */ + error: RequestError; + /** 请求数据 */ + data: null; + } + + /** 自定义的请求结果 */ + type RequestResult = SuccessResult | FailedResult; } /** 菜单项配置 */ type GlobalMenuOption = import('naive-ui').MenuOption & { - key: string; - label: string; - icon?: () => import('vue').VNodeChild; - children?: GlobalMenuOption[]; + key: string; + label: string; + icon?: () => import('vue').VNodeChild; + children?: GlobalMenuOption[]; }; diff --git a/src/utils/auth.ts b/src/utils/auth.ts index ac13877..3b2bb30 100644 --- a/src/utils/auth.ts +++ b/src/utils/auth.ts @@ -1,35 +1,49 @@ -import { setLocal, getLocal, removeLocal } from './storage'; +import { loacl } from './storage'; import { EnumStorageKey } from '@/enum'; + const DURATION = 6 * 60 * 60; /* 获取当前token */ export function getToken() { - return getLocal(EnumStorageKey.token); + return loacl.get(EnumStorageKey.token); } /* 设置token */ export function setToken(data: string) { - setLocal(EnumStorageKey.token, data, DURATION); + loacl.set(EnumStorageKey.token, data, DURATION); } /* 移除token */ export function removeToken() { - removeLocal(EnumStorageKey.token); + loacl.remove(EnumStorageKey.token); +} +/* 获取当前refreshToken */ +export function getRefreshToken() { + return loacl.get(EnumStorageKey.refreshToken); +} +/* 设置refreshToken */ +export function setRefreshToken(data: string) { + loacl.set(EnumStorageKey.refreshToken, data, DURATION); +} +/* 移除refreshToken */ +export function removeRefreshToken() { + loacl.remove(EnumStorageKey.refreshToken); } /* 获取用户详情 */ export function getUserInfo() { - return getLocal(EnumStorageKey.userInfo); + return loacl.get(EnumStorageKey.userInfo); } /* 设置用户详情 */ export function setUserInfo(data: any) { - setLocal(EnumStorageKey.userInfo, data); + loacl.set(EnumStorageKey.userInfo, data); } /* 移除用户详情 */ export function removeUserInfo() { - removeLocal(EnumStorageKey.userInfo); + loacl.remove(EnumStorageKey.userInfo); } /** 去除用户相关缓存 */ export function clearAuthStorage() { - removeToken(); - removeUserInfo(); + removeToken(); + removeRefreshToken(); + removeUserInfo(); } diff --git a/src/utils/storage.ts b/src/utils/storage.ts index 83654c2..2be6cc1 100644 --- a/src/utils/storage.ts +++ b/src/utils/storage.ts @@ -1,6 +1,3 @@ -// 默认缓存期限为7天 -const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7; - // 读取缓存前缀 const prefix = import.meta.env.VITE_STORAGE_PREFIX as string; @@ -8,69 +5,81 @@ interface StorageData { value: any; expire: number | null; } - /** * LocalStorage部分操作 */ -export const setLocal = (key: string, value: unknown, expire: number | null = DEFAULT_CACHE_TIME): void => { - const storageData: StorageData = { - value, - expire: expire !== null ? new Date().getTime() + expire * 1000 : null, - }; - const json = JSON.stringify(storageData); - localStorage.setItem(prefix + key, json); -}; +function createLocalStorage() { + // 默认缓存期限为7天 + const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7; -export const getLocal = (key: string) => { - const json = localStorage.getItem(prefix + key); - if (!json) return null; - - let storageData: StorageData | null = null; - storageData = JSON.parse(json as string); - - if (storageData) { - const { value, expire } = storageData; - if (expire === null || expire >= Date.now()) { - return value; - } + function set(key: string, value: any, expire: number = DEFAULT_CACHE_TIME) { + const storageData: StorageData = { + value, + expire: new Date().getTime() + expire * 1000, + }; + const json = JSON.stringify(storageData); + window.localStorage.setItem(prefix + key, json); } - removeLocal(key); - return null; -}; -export const removeLocal = (key: string): void => { - localStorage.removeItem(prefix + key); -}; + function get(key: string) { + const json = window.localStorage.getItem(prefix + key); + if (!json) return null; -export const clearLocal = (): void => { - localStorage.clear(); -}; + let storageData: StorageData | null = null; + storageData = JSON.parse(json as string); + if (storageData) { + const { value, expire } = storageData; + if (expire === null || expire >= Date.now()) { + return value; + } + } + loacl.remove(key); + return null; + } + + function remove(key: string) { + window.localStorage.removeItem(prefix + key); + } + + function clear() { + window.localStorage.clear(); + } + return { + set, + get, + remove, + clear, + }; +} /** * sessionStorage部分操作 */ -export function setSession(key: string, value: unknown) { - const json = JSON.stringify(value); - sessionStorage.setItem(prefix + key, json); -} -export function getSession(key: string) { - const json = sessionStorage.getItem(prefix + key); - let data: T | null = null; - if (json) { - try { - data = JSON.parse(json); - } catch { - // 防止解析失败 - } +function createSessionStorage() { + function set(key: string, value: any) { + const json = JSON.stringify(value); + window.sessionStorage.setItem(prefix + key, json); + } + function get(key: string) { + const json = sessionStorage.getItem(prefix + key); + let data: T | null = null; + if (json) { + try { + data = JSON.parse(json); + } catch { + // 防止解析失败 + } + } + return data; + } + function remove(key: string) { + window.sessionStorage.removeItem(prefix + key); + } + function clear() { + window.sessionStorage.clear(); } - return data; } -export function removeSession(key: string) { - window.sessionStorage.removeItem(prefix + key); -} - -export function clearSession() { - window.sessionStorage.clear(); -} +export const loacl = createLocalStorage(); +export const session = createSessionStorage(); diff --git a/src/views/dashboard/workbench/index.vue b/src/views/dashboard/workbench/index.vue index 9e86646..d04adf5 100644 --- a/src/views/dashboard/workbench/index.vue +++ b/src/views/dashboard/workbench/index.vue @@ -1,33 +1,55 @@