feat(service.utils): 完善axiso处理流程，loacal存储

mock/module/user.ts

@@ -3,7 +3,7 @@ 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',
@@ -388,7 +388,15 @@ export default [
 		timeout: 1000,
 		method: 'post',
 		response: () => {
-      return resultSuccess({ token });
+			return resultSuccess({ token: token(), refreshToken: token() });
+		},
+	},
+	{
+		url: '/mock/updateToken',
+		timeout: 1000,
+		method: 'post',
+		response: () => {
+			return resultSuccess({ token: token(), refreshToken: token() });
 		},
 	},
 	{

src/App.vue

@@ -12,13 +12,7 @@
 
 <script setup lang="ts">
 import { useAppStore } from './store';
-import {
+import { zhCN, dateZhCN, GlobalThemeOverrides, useOsTheme } from 'naive-ui';
-	zhCN,
-	dateZhCN,
-	GlobalThemeOverrides,
-	useOsTheme,
-	darkTheme,
-} from 'naive-ui';
 import themeConfig from './theme.json';
 
 const locale = zhCN;

src/components/common/appLoading.vue

@@ -26,9 +26,9 @@
         <div />
       </div>
     </div>
-    <h2 class="text-28px font-500 text-#646464">
+    <n-h1 class="z-1">
       {{ title }}
-    </h2>
+    </n-h1>
   </div>
 </template>
 
@@ -45,7 +45,7 @@ const { title } = useAppInfo();
 	align-items: center;
 	justify-content: center;
 	flex-direction: column;
-	gap: 10vh;
+	gap: 15vh;
 	position: fixed;
 	background-color: aliceblue;
 	z-index: 1;
@@ -112,8 +112,7 @@ const { title } = useAppInfo();
 	right: var(--right);
 	bottom: var(--bottom);
 	left: var(--left);
-	transform: rotateY(var(--rotateY)) rotateX(var(--rotateX))
+	transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
-		translateZ(var(--translateZ));
 }
 
 .boxes .box > div:nth-child(1) {

src/config/service.ts

@@ -1,3 +1,20 @@
+/** 默认实例的Aixos配置 */
+export const DEFAULT_AXIOS_OPTIONS = {
+	// 请求超时时间,默认15秒
+	timeout: 15 * 1000,
+};
+
+/** 默认实例的后端字段配置 */
+export const DEFAULT_BACKEND_OPTIONS = {
+	codeKey: 'code',
+	dataKey: 'data',
+	msgKey: 'msg',
+	successCode: 200,
+};
+
+/** 错误信息的显示时间 */
+export const ERROR_MSG_DURATION = 3 * 1000;
+
 /** 默认的请求错误code */
 export const DEFAULT_REQUEST_ERROR_CODE = 'DEFAULT';
 
@@ -32,3 +49,9 @@ export const ERROR_STATUS = {
 	505: '505: http版本不支持该请求~',
 	[DEFAULT_REQUEST_ERROR_CODE]: DEFAULT_REQUEST_ERROR_MSG,
 };
+
+/** token刷新的code */
+export const REFRESH_TOKEN_CODE = [888, 999];
+
+/** 没有错误提示的code */
+export const ERROR_NO_TIP_STATUS = [10000];

src/enum/common.ts

@@ -4,6 +4,8 @@ export enum EnumStorageKey {
 	userInfo = '__USER_INFO__',
 	/* token */
 	token = '__TOKEN__',
+	/* refreshToken */
+	refreshToken = '__REFRESH_TOKEN__',
 	/* 标签栏信息 */
 	tabsRoutes = '__TABS_ROUTES__',
 }

src/layouts/components/header/UserCenter.vue

@@ -1,8 +1,16 @@
 <template>
-  <n-dropdown trigger="click" :options="options" @select="handleSelect">
+  <n-dropdown
+    trigger="click"
+    :options="options"
+    @select="handleSelect"
+  >
     <HeaderButton>
-      <n-avatar round size="large" :src="authStore.userInfo?.avatar" />
+      <n-avatar
-      {{ authStore.userInfo?.realName }}
+        round
+        size="large"
+        :src="userInfo.avatar"
+      />
+      {{ userInfo.realName }}
     </HeaderButton>
   </n-dropdown>
 </template>
@@ -12,7 +20,7 @@ import HeaderButton from '../common/HeaderButton.vue';
 import { renderIcon } from '@/utils/icon';
 import { useAuthStore } from '@/store';
 
-const authStore = useAuthStore();
+const { userInfo, resetAuthStore } = useAuthStore();
 
 const options = [
 	{
@@ -32,7 +40,7 @@ const options = [
 ];
 const handleSelect = (key: string | number) => {
 	if (key === 'loginOut') {
-    authStore.resetAuthStore();
+		resetAuthStore();
 	}
 };
 </script>

src/service/api/login.ts

@@ -7,6 +7,9 @@ interface Ilogin {
 export function fetchLogin(params: Ilogin) {
 	return mockRequest.post('/login', params);
 }
+export function fetchUpdateToken(params: string) {
+	return mockRequest.post('/updateToken', params);
+}
 export function fetchUserInfo() {
 	return mockRequest.get('/getUserInfo');
 }

src/service/api/test.ts

@@ -24,6 +24,25 @@ export function fetachPut(params: Itest) {
 export function fetachPatch(params: Itest) {
 	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');

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<string, any>, config: Service.BackendResultConfig) {
+export function handleBusinessError(data: Record<string, any>, config: Service.BackendResultConfig) {
 	const { codeKey, msgKey } = config;
-	const error = {
+	const error: Service.RequestError = {
 		type: 'Business',
-		code: apiData[codeKey],
+		code: data[codeKey],
-		msg: apiData[msgKey],
+		msg: data[msgKey],
 	};
 
+	showError(error);
+
 	return error;
 }
+
+/**
+ * @description: 统一成功和失败返回类型
+ * @param {any} data
+ * @param {Service} error
+ * @return {*} result
+ */
+export async function handleServiceResult<T = any>(data: any, error: Service.RequestError | null) {
+	if (error) {
+		const fail: Service.FailedResult = {
+			error,
+			data: null,
+		};
+		return fail;
+	}
+	const success: Service.SuccessResult<T> = {
+		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 });
+}

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(
+	constructor(axiosConfig: AxiosRequestConfig, backendConfig: Service.BackendResultConfig) {
-		axiosConfig: AxiosRequestConfig,
-		backendConfig: Service.BackendResultConfig = {
-			codeKey: 'code',
-			dataKey: 'data',
-			msgKey: 'msg',
-			successCode: '200',
-		}
-	) {
-		this.backendConfig = backendConfig;
 		// 设置了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) => {
+			(error: AxiosError) => {
-				const error = handleAxiosError(axiosError);
+				const errorResult = handleAxiosError(error);
-				Promise.reject(error);
+				return handleServiceResult(null, errorResult);
 			}
 		);
 		this.instance.interceptors.response.use(
-			async (response) => {
+			async (response): Promise<any> => {
 				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 handleServiceResult(apiData[dataKey], null);
-						return apiData;
+					}
+					// 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);
+					const errorResult = handleBusinessError(apiData, this.backendConfig);
-					return Promise.reject(error);
+					return handleServiceResult(null, errorResult);
 				}
 				// 接口请求失败
-				const error = handleResponseError(response);
+				const errorResult = handleResponseError(response);
-				return Promise.reject(error);
+				return handleServiceResult(null, errorResult);
 			},
-			(axiosError: AxiosError) => {
+			(error: AxiosError) => {
 				// 处理http常见错误，进行全局提示等
-				const error = handleAxiosError(axiosError);
+				const errorResult = handleAxiosError(error);
-				return Promise.reject(error);
+				return handleServiceResult(null, errorResult);
 			}
 		);
 	}

src/store/modules/auth.ts

@@ -1,6 +1,6 @@
 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';
@@ -83,8 +83,9 @@ export const useAuthStore = defineStore('auth-store', {
 		async catchUserInfo(userToken: Auth.loginToken) {
 			let catchSuccess = false;
 			// 先存储token
-      const { token } = userToken;
+			const { token, refreshToken } = userToken;
 			setToken(token);
+			setRefreshToken(refreshToken);
 
 			// 请求/存储用户信息
 			const { data } = await fetchUserInfo();

src/typings/business.d.ts

@@ -11,6 +11,7 @@ declare namespace Auth {
 	/** 用户信息 */
 	interface loginToken {
 		token: string;
+		refreshToken: string;
 	}
 
 	interface UserInfo {

src/typings/system.d.ts

@@ -11,6 +11,37 @@ declare namespace Service {
 		/** 后端业务上定义的成功请求的状态 */
 		successCode: number | string;
 	}
+
+	type RequestErrorType = 'Axios' | 'Response' | 'Business';
+	type RequestCode = string | number;
+
+	interface RequestError {
+		/** 请求服务的错误类型 */
+		type: RequestErrorType;
+		/** 错误码 */
+		code: RequestCode;
+		/** 错误信息 */
+		msg: string;
+	}
+
+	/** 自定义的请求成功结果 */
+	interface SuccessResult<T = any> {
+		/** 请求错误 */
+		error: null;
+		/** 请求数据 */
+		data: T;
+	}
+
+	/** 自定义的请求失败结果 */
+	interface FailedResult {
+		/** 请求错误 */
+		error: RequestError;
+		/** 请求数据 */
+		data: null;
+	}
+
+	/** 自定义的请求结果 */
+	type RequestResult<T = any> = SuccessResult<T> | FailedResult;
 }
 /** 菜单项配置 */
 type GlobalMenuOption = import('naive-ui').MenuOption & {

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();
+	removeRefreshToken();
 	removeUserInfo();
 }

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,21 +5,24 @@ interface StorageData {
 	value: any;
 	expire: number | null;
 }
-
 /**
  * LocalStorage部分操作
  */
-export const setLocal = (key: string, value: unknown, expire: number | null = DEFAULT_CACHE_TIME): void => {
+function createLocalStorage() {
+	// 默认缓存期限为7天
+	const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;
+
+	function set(key: string, value: any, expire: number = DEFAULT_CACHE_TIME) {
 		const storageData: StorageData = {
 			value,
-		expire: expire !== null ? new Date().getTime() + expire * 1000 : null,
+			expire: new Date().getTime() + expire * 1000,
 		};
 		const json = JSON.stringify(storageData);
-	localStorage.setItem(prefix + key, json);
+		window.localStorage.setItem(prefix + key, json);
-};
+	}
 
-export const getLocal = (key: string) => {
+	function get(key: string) {
-	const json = localStorage.getItem(prefix + key);
+		const json = window.localStorage.getItem(prefix + key);
 		if (!json) return null;
 
 		let storageData: StorageData | null = null;
@@ -34,27 +34,34 @@ export const getLocal = (key: string) => {
 				return value;
 			}
 		}
-	removeLocal(key);
+		loacl.remove(key);
 		return null;
-};
+	}
 
-export const removeLocal = (key: string): void => {
+	function remove(key: string) {
-	localStorage.removeItem(prefix + key);
+		window.localStorage.removeItem(prefix + key);
-};
+	}
-
-export const clearLocal = (): void => {
-	localStorage.clear();
-};
 
+	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<T>(key: string) {
+function createSessionStorage() {
+	function set(key: string, value: any) {
+		const json = JSON.stringify(value);
+		window.sessionStorage.setItem(prefix + key, json);
+	}
+	function get<T>(key: string) {
 		const json = sessionStorage.getItem(prefix + key);
 		let data: T | null = null;
 		if (json) {
@@ -65,12 +72,14 @@ export function getSession<T>(key: string) {
 			}
 		}
 		return data;
-}
+	}
-
+	function remove(key: string) {
-export function removeSession(key: string) {
 		window.sessionStorage.removeItem(prefix + key);
+	}
+	function clear() {
+		window.sessionStorage.clear();
+	}
 }
 
-export function clearSession() {
+export const loacl = createLocalStorage();
-	window.sessionStorage.clear();
+export const session = createSessionStorage();
-}

src/views/dashboard/workbench/index.vue

@@ -1,33 +1,55 @@
 <template>
-  <n-grid :x-gap="16" :y-gap="16">
+  <n-grid
+    :x-gap="16"
+    :y-gap="16"
+  >
     <n-gi :span="24">
       <n-card>
         <n-space justify="space-between">
           <div class="flex-y-center">
-            <n-avatar round :size="64" :src="authStore.userInfo?.avatar" />
+            <n-avatar
+              round
+              :size="64"
+              :src="userInfo.avatar"
+            />
             <div class="pl-12px">
-              <h3 class="text-18px font-semibold">您好，{{ authStore.userInfo.realName }},今天又是充满活力的一天！</h3>
+              <h3 class="text-18px font-semibold">
-              <p class="leading-30px text-[#999]">今日多云转晴，20℃ - 25℃！</p>
+                您好，{{ userInfo.realName }},今天又是充满活力的一天！
+              </h3>
+              <p class="leading-30px text-[#999]">
+                今日多云转晴，20℃ - 25℃！
+              </p>
             </div>
           </div>
           <n-row class="w-450px">
             <n-col :span="10">
-              <n-statistic label="统计数据" :value="99">
+              <n-statistic
+                label="统计数据"
+                :value="99"
+              >
                 <template #prefix>
                   <i-icon-park-outline-chart-histogram />
                 </template>
-                <template #suffix>/ 100</template>
+                <template #suffix>
+                  / 100
+                </template>
               </n-statistic>
             </n-col>
             <n-col :span="10">
-              <n-statistic label="活跃用户" value="34,123">
+              <n-statistic
+                label="活跃用户"
+                value="34,123"
+              >
                 <template #prefix>
                   <i-icon-park-outline-customer />
                 </template>
               </n-statistic>
             </n-col>
             <n-col :span="4">
-              <n-statistic label="待办" :value="18">
+              <n-statistic
+                label="待办"
+                :value="18"
+              >
                 <template #prefix>
                   <i-icon-park-outline-list-checkbox />
                 </template>
@@ -38,54 +60,108 @@
       </n-card>
     </n-gi>
     <n-gi :span="17">
-      <n-space vertical :size="16">
+      <n-space
+        vertical
+        :size="16"
+      >
         <n-card title="项目">
-          <template #header-extra><n-button type="primary" quaternary>更多</n-button></template>
+          <template #header-extra>
-          <n-grid :x-gap="8" :y-gap="8">
+            <n-button
+              type="primary"
+              quaternary
+            >
+              更多
+            </n-button>
+          </template>
+          <n-grid
+            :x-gap="8"
+            :y-gap="8"
+          >
             <n-gi :span="8">
-              <n-card title="卡片" hoverable>
+              <n-card
+                title="卡片"
+                hoverable
+              >
                 卡片内容
-                <template #action>#action</template>
+                <template #action>
+                  #action
+                </template>
               </n-card>
             </n-gi>
             <n-gi :span="8">
-              <n-card title="卡片" hoverable>
+              <n-card
+                title="卡片"
+                hoverable
+              >
                 卡片内容
-                <template #action>#action</template>
+                <template #action>
+                  #action
+                </template>
               </n-card>
             </n-gi>
             <n-gi :span="8">
-              <n-card title="卡片" hoverable>
+              <n-card
+                title="卡片"
+                hoverable
+              >
                 卡片内容
-                <template #action>#action</template>
+                <template #action>
+                  #action
+                </template>
               </n-card>
             </n-gi>
             <n-gi :span="8">
-              <n-card title="卡片" hoverable>
+              <n-card
+                title="卡片"
+                hoverable
+              >
                 卡片内容
-                <template #action>#action</template>
+                <template #action>
+                  #action
+                </template>
               </n-card>
             </n-gi>
             <n-gi :span="8">
-              <n-card title="卡片" hoverable>
+              <n-card
+                title="卡片"
+                hoverable
+              >
                 卡片内容
-                <template #action>#action</template>
+                <template #action>
+                  #action
+                </template>
               </n-card>
             </n-gi>
             <n-gi :span="8">
-              <n-card title="卡片" hoverable>
+              <n-card
+                title="卡片"
+                hoverable
+              >
                 卡片内容
-                <template #action>#action</template>
+                <template #action>
+                  #action
+                </template>
               </n-card>
             </n-gi>
           </n-grid>
         </n-card>
         <n-card title="动态">
-          <template #header-extra><n-button type="primary" quaternary>更多</n-button></template>
+          <template #header-extra>
+            <n-button
+              type="primary"
+              quaternary
+            >
+              更多
+            </n-button>
+          </template>
           <n-list hoverable>
             <n-list-item>
               <template #prefix>
-                <n-avatar round :size="48" :src="authStore.userInfo?.avatar" />
+                <n-avatar
+                  round
+                  :size="48"
+                  :src="userInfo.avatar"
+                />
               </template>
               <n-thing
                 title="客怎车"
@@ -95,7 +171,11 @@
             </n-list-item>
             <n-list-item>
               <template #prefix>
-                <n-avatar round :size="48" :src="authStore.userInfo?.avatar" />
+                <n-avatar
+                  round
+                  :size="48"
+                  :src="userInfo.avatar"
+                />
               </template>
               <n-thing
                 title="街健五大神技"
@@ -105,7 +185,11 @@
             </n-list-item>
             <n-list-item>
               <template #prefix>
-                <n-avatar round :size="48" :src="authStore.userInfo?.avatar" />
+                <n-avatar
+                  round
+                  :size="48"
+                  :src="userInfo.avatar"
+                />
               </template>
               <n-thing
                 title="天下岂有七十年太子乎"
@@ -115,7 +199,11 @@
             </n-list-item>
             <n-list-item>
               <template #prefix>
-                <n-avatar round :size="48" :src="authStore.userInfo?.avatar" />
+                <n-avatar
+                  round
+                  :size="48"
+                  :src="userInfo.avatar"
+                />
               </template>
               <n-thing
                 title="你干嘛～哈哈～哎哟～"
@@ -128,47 +216,146 @@
       </n-space>
     </n-gi>
     <n-gi :span="7">
-      <n-space vertical :size="16">
+      <n-space
+        vertical
+        :size="16"
+      >
         <n-card title="公告">
-          <template #header-extra><n-button type="primary" quaternary>更多</n-button></template>
+          <template #header-extra>
+            <n-button
+              type="primary"
+              quaternary
+            >
+              更多
+            </n-button>
+          </template>
           <n-list>
             <n-list-item>
               <template #prefix>
-                <n-tag :bordered="false" type="info" size="small">通知</n-tag>
+                <n-tag
+                  :bordered="false"
+                  type="info"
+                  size="small"
+                >
+                  通知
+                </n-tag>
               </template>
-              <n-button text>漂洋过海上大专</n-button>
+              <n-button text>
+                漂洋过海上大专
+              </n-button>
             </n-list-item>
             <n-list-item>
               <template #prefix>
-                <n-tag :bordered="false" type="success" size="small">消息</n-tag>
+                <n-tag
+                  :bordered="false"
+                  type="success"
+                  size="small"
+                >
+                  消息
+                </n-tag>
               </template>
-              <n-button text>你在玩很新的东西</n-button>
+              <n-button text>
+                你在玩很新的东西
+              </n-button>
             </n-list-item>
             <n-list-item>
               <template #prefix>
-                <n-tag :bordered="false" type="warning" size="small">活动</n-tag>
+                <n-tag
+                  :bordered="false"
+                  type="warning"
+                  size="small"
+                >
+                  活动
+                </n-tag>
               </template>
-              <n-button text>上岸第一剑，先斩意中人</n-button>
+              <n-button text>
+                上岸第一剑，先斩意中人
+              </n-button>
             </n-list-item>
           </n-list>
         </n-card>
         <n-card title="快捷入口">
-          <n-grid :x-gap="8" :y-gap="8">
+          <n-grid
-            <n-gi :span="8"><n-card title="卡片" hoverable>卡片内容</n-card></n-gi>
+            :x-gap="8"
-            <n-gi :span="8"><n-card title="卡片" hoverable>卡片内容</n-card></n-gi>
+            :y-gap="8"
-            <n-gi :span="8"><n-card title="卡片" hoverable>卡片内容</n-card></n-gi>
+          >
-            <n-gi :span="8"><n-card title="卡片" hoverable>卡片内容</n-card></n-gi>
+            <n-gi :span="8">
-            <n-gi :span="8"><n-card title="卡片" hoverable>卡片内容</n-card></n-gi>
+              <n-card
-            <n-gi :span="8"><n-card title="卡片" hoverable>卡片内容</n-card></n-gi>
+                title="卡片"
+                hoverable
+              >
+                卡片内容
+              </n-card>
+            </n-gi>
+            <n-gi :span="8">
+              <n-card
+                title="卡片"
+                hoverable
+              >
+                卡片内容
+              </n-card>
+            </n-gi>
+            <n-gi :span="8">
+              <n-card
+                title="卡片"
+                hoverable
+              >
+                卡片内容
+              </n-card>
+            </n-gi>
+            <n-gi :span="8">
+              <n-card
+                title="卡片"
+                hoverable
+              >
+                卡片内容
+              </n-card>
+            </n-gi>
+            <n-gi :span="8">
+              <n-card
+                title="卡片"
+                hoverable
+              >
+                卡片内容
+              </n-card>
+            </n-gi>
+            <n-gi :span="8">
+              <n-card
+                title="卡片"
+                hoverable
+              >
+                卡片内容
+              </n-card>
+            </n-gi>
           </n-grid>
         </n-card>
         <n-card title="任务进度">
           <n-timeline>
             <n-timeline-item content="啊" />
-            <n-timeline-item type="success" title="成功" content="哪里成功" time="2018-04-03 20:46" />
+            <n-timeline-item
-            <n-timeline-item type="error" content="哪里错误" time="2018-04-03 20:46" />
+              type="success"
-            <n-timeline-item type="warning" title="警告" content="哪里警告" time="2018-04-03 20:46" />
+              title="成功"
-            <n-timeline-item type="info" title="信息" content="是的" time="2018-04-03 20:46" line-type="dashed" />
+              content="哪里成功"
+              time="2018-04-03 20:46"
+            />
+            <n-timeline-item
+              type="error"
+              content="哪里错误"
+              time="2018-04-03 20:46"
+            />
+            <n-timeline-item
+              type="warning"
+              title="警告"
+              content="哪里警告"
+              time="2018-04-03 20:46"
+            />
+            <n-timeline-item
+              type="info"
+              title="信息"
+              content="是的"
+              time="2018-04-03 20:46"
+              line-type="dashed"
+            />
             <n-timeline-item content="啊" />
           </n-timeline>
         </n-card>
@@ -180,7 +367,7 @@
 <script setup lang="ts">
 import { useAuthStore } from '@/store';
 
-const authStore = useAuthStore();
+const { userInfo } = useAuthStore();
 </script>
 
 <style scoped></style>

src/views/test/test1/index.vue

@@ -1,13 +1,109 @@
 <template>
   <div>
     <n-space>
-      <n-button strong secondary type="success" @click="pinter">check env</n-button>
+      <n-button
-      <n-button strong secondary type="success" @click="get">to get</n-button>
+        strong
-      <n-button strong secondary type="success" @click="post">to post</n-button>
+        secondary
-      <n-button strong secondary type="success" @click="delete2">to delete</n-button>
+        type="success"
-      <n-button strong secondary type="success" @click="put">to put</n-button>
+        @click="pinter"
-      <n-button strong secondary type="success" @click="patch">to patch</n-button>
+      >
-      <n-button strong secondary type="success" @click="mock">to use mock</n-button>
+        check env
+      </n-button>
+      <n-button
+        strong
+        secondary
+        type="success"
+        @click="get"
+      >
+        use online get
+      </n-button>
+      <n-button
+        strong
+        secondary
+        type="success"
+        @click="post"
+      >
+        use online post
+      </n-button>
+      <n-button
+        strong
+        secondary
+        type="success"
+        @click="delete2"
+      >
+        use online delete
+      </n-button>
+      <n-button
+        strong
+        secondary
+        type="success"
+        @click="put"
+      >
+        use online put
+      </n-button>
+      <n-button
+        strong
+        secondary
+        type="success"
+        @click="patch"
+      >
+        use online patch
+      </n-button>
+      <n-button
+        strong
+        secondary
+        type="success"
+        @click="mock"
+      >
+        to use mock
+      </n-button>
+      <n-button
+        strong
+        secondary
+        type="success"
+        @click="patch"
+      >
+        use online patch
+      </n-button>
+      <n-button
+        strong
+        secondary
+        type="success"
+        @click="mock"
+      >
+        to use mock
+      </n-button>
+      <n-button
+        strong
+        secondary
+        type="error"
+        @click="failedRequest"
+      >
+        请求失败
+      </n-button>
+      <n-button
+        strong
+        secondary
+        type="error"
+        @click="failedResponse"
+      >
+        响应失败
+      </n-button>
+      <n-button
+        strong
+        secondary
+        type="error"
+        @click="failedResponse_NT"
+      >
+        响应失败(无提示)
+      </n-button>
+      <n-button
+        strong
+        secondary
+        @click="updataToken"
+      >
+        测试刷新token接口
+      </n-button>
     </n-space>
 
     {{ msg }}
@@ -15,7 +111,19 @@
 </template>
 
 <script setup lang="ts">
-import { fetachGet, fetachPost, fetachDelete, fetachPut, fetachPatch, fetchMock } from '@/service';
+import {
+	fetachGet,
+	fetachPost,
+	fetachDelete,
+	fetachPut,
+	fetachPatch,
+	fetchMock,
+	testFailedRequest,
+	testFailedResponse,
+	testFailedResponse_NT,
+	testUpdataToken,
+} from '@/service';
+
 import { ref } from 'vue';
 const msg = ref();
 const pinter = () => {
@@ -55,6 +163,31 @@ const patch = () => {
 		msg.value = res;
 	});
 };
+
+// 测试请求失败
+const failedRequest = () => {
+	testFailedRequest().then((res) => {
+		msg.value = res;
+	});
+};
+// 测试业务失败
+const failedResponse = () => {
+	testFailedResponse().then((res) => {
+		msg.value = res;
+	});
+};
+// 测试业务失败无提示
+const failedResponse_NT = () => {
+	testFailedResponse_NT().then((res) => {
+		msg.value = res;
+	});
+};
+// 测试刷新token
+const updataToken = () => {
+	testUpdataToken().then((res) => {
+		msg.value = res;
+	});
+};
 const mock = () => {
 	fetchMock().then((res) => {
 		msg.value = res;