From ef6392615b6416921d55c522cfd08b3a96e1ad71 Mon Sep 17 00:00:00 2001 From: "chen.home" <1147347984@qq.com> Date: Thu, 12 Jan 2023 00:25:48 +0800 Subject: [PATCH] =?UTF-8?q?refactor(aixos):=20=E5=AE=8C=E5=96=84axios?= =?UTF-8?q?=E9=94=99=E8=AF=AF=E5=A4=84=E7=90=86=E6=B5=81=E7=A8=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/service/http/{help.ts => handle.ts} | 45 +++- src/service/http/instance.ts | 57 ++-- src/store/modules/route.ts | 248 ++++++++--------- src/utils/storage.ts | 72 ++--- src/views/list/commonList/index.vue | 343 +++++++++++++++--------- 5 files changed, 442 insertions(+), 323 deletions(-) rename src/service/http/{help.ts => handle.ts} (50%) diff --git a/src/service/http/help.ts b/src/service/http/handle.ts similarity index 50% rename from src/service/http/help.ts rename to src/service/http/handle.ts index 22b0d3a..f0779b7 100644 --- a/src/service/http/help.ts +++ b/src/service/http/handle.ts @@ -10,13 +10,13 @@ import { } from '@/config'; type ErrorStatus = keyof typeof ERROR_STATUS; /** - * @description: 处理axios返回的http错误 + * @description: 处理axios或http错误 * @param {AxiosError} err * @return {*} */ -export function handleHttpError(err: AxiosError) { +export function handleAxiosError(err: AxiosError) { const error = { - type: 'axios', + type: 'Axios', code: DEFAULT_REQUEST_ERROR_CODE, msg: DEFAULT_REQUEST_ERROR_MSG, }; @@ -43,9 +43,42 @@ export function handleHttpError(err: AxiosError) { /** * @description: 处理axios请求成功，但返回后端服务器报错 - * @param {AxiosResponse} err + * @param {AxiosResponse} response * @return {*} */ -// export function handleResponseError(err: AxiosResponse) {} +export function handleResponseError(response: AxiosResponse) { + const error = { + type: 'Axios', + code: DEFAULT_REQUEST_ERROR_CODE, + msg: DEFAULT_REQUEST_ERROR_MSG, + }; -// export function handleBusinessError() {} + if (!window.navigator.onLine) { + // 网路错误 + Object.assign(error, { code: NETWORK_ERROR_CODE, msg: NETWORK_ERROR_MSG }); + } else { + // 请求成功的状态码非200的错误 + const errorCode: ErrorStatus = response.status as ErrorStatus; + const msg = ERROR_STATUS[errorCode] || DEFAULT_REQUEST_ERROR_MSG; + Object.assign(error, { type: 'Response', code: errorCode, msg }); + } + + return error; +} + +/** + * @description: + * @param {Record} apiData 接口返回的后台数据 + * @param {Service} config axios字段配置 + * @return {*} + */ +export function handleBusinessError(apiData: Record, config: Service.BackendResultConfig) { + const { codeKey, msgKey } = config; + const error = { + type: 'Business', + code: apiData[codeKey], + msg: apiData[msgKey], + }; + + return error; +} diff --git a/src/service/http/instance.ts b/src/service/http/instance.ts index 7b845a1..c18a591 100644 --- a/src/service/http/instance.ts +++ b/src/service/http/instance.ts @@ -1,8 +1,7 @@ import axios from 'axios'; import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'; import { getToken } from '@/utils'; -// import { handleHttpError, handleResponseError, handleBusinessError } from './help'; -import { handleHttpError } from './help'; +import { handleAxiosError, handleResponseError, handleBusinessError } from './handle'; /** * @description: 封装axios请求类 @@ -34,34 +33,44 @@ export default class createAxiosInstance { // 设置类拦截器的函数 setInterceptor() { this.instance.interceptors.request.use( - (config: AxiosRequestConfig) => { - // 一般会请求拦截里面加token - config.headers!.Authorization = getToken(); - return config; + async (config) => { + const handleConfig = { ...config }; + if (handleConfig.headers) { + // 设置token + typeof handleConfig.headers.set === 'function' && + handleConfig.headers.set('Authorization', `Bearer ${getToken() || ''}`); + } + return handleConfig; }, - (err: any) => Promise.reject(err) + (axiosError: AxiosError) => { + const error = handleAxiosError(axiosError); + Promise.reject(error); + } ); this.instance.interceptors.response.use( - // 因为接口的数据都在res.data下，所以直接返回res.data - // 系统如果有自定义code也可以在这里处理 - (res: AxiosResponse) => { - // apiData 是 API 返回的数据 - const apiData = res.data; - // 这个 Code 是和后端约定的业务 Code - const code = String(res.data[this.backendConfig.codeKey]); - switch (code) { - case this.backendConfig.successCode: - // code === 200 代表没有错误,直接返回约定的数据内容 + async (response) => { + const { status } = response; + if (status === 200) { + // 获取返回的数据 + const apiData = response.data; + const { codeKey, successCode } = this.backendConfig; + // 请求成功 + if (apiData[codeKey] == successCode) { + // return apiData[dataKey]; return apiData; - default: - // 不是正确的 Code,返回错误提示信息 - return Promise.reject(new Error(`Error:${this.backendConfig.dataKey}`)); + } + //TODO 添加刷新token的操作 + // 业务请求失败 + const error = handleBusinessError(apiData, this.backendConfig); + return Promise.reject(error); } + // 接口请求失败 + const error = handleResponseError(response); + return Promise.reject(error); }, - (err: AxiosError) => { - // 这里用来处理http常见错误，进行全局提示等 - const error = handleHttpError(err); - // 这里是AxiosError类型，所以一般我们只reject我们需要的响应即可 + (axiosError: AxiosError) => { + // 处理http常见错误，进行全局提示等 + const error = handleAxiosError(axiosError); return Promise.reject(error); } ); diff --git a/src/store/modules/route.ts b/src/store/modules/route.ts index 27de9f3..ed266a1 100644 --- a/src/store/modules/route.ts +++ b/src/store/modules/route.ts @@ -7,130 +7,130 @@ import { fetchUserRoutes } from '@/service'; import { staticRoutes } from '@/router/modules'; interface RoutesStatus { - isInitAuthRoute: boolean; - menus: any; - userRoutes: AppRoute.Route[]; - activeMenu: string | null; - authRouteMode: ImportMetaEnv['VITE_AUTH_ROUTE_MODE']; - cacheRoutes: string[]; + isInitAuthRoute: boolean; + menus: any; + userRoutes: AppRoute.Route[]; + activeMenu: string | null; + authRouteMode: ImportMetaEnv['VITE_AUTH_ROUTE_MODE']; + cacheRoutes: string[]; } export const useRouteStore = defineStore('route-store', { - state: (): RoutesStatus => { - return { - userRoutes: [], - isInitAuthRoute: false, - menus: [], - activeMenu: null, - authRouteMode: import.meta.env.VITE_AUTH_ROUTE_MODE, - cacheRoutes: [], - }; - }, - actions: { - resetRouteStore() { - this.resetRoutes(); - this.$reset(); - }, - resetRoutes() { - /* 删除后面添加的路由 */ - router.removeRoute('appRoot'); - }, - /* 根据当前路由的name生成面包屑数据 */ - createBreadcrumbFromRoutes(routeName = '/', userRoutes: AppRoute.Route[]) { - const path: AppRoute.Route[] = []; - // 筛选所有包含目标的各级路由组合成一维数组 - const getPathfromRoutes = (routeName: string, userRoutes: AppRoute.Route[]) => { - userRoutes.forEach((item) => { - if (this.hasPathinAllPath(routeName, item)) { - path.push(item); - if (item.children && item.children.length !== 0) { - getPathfromRoutes(routeName, item.children); - } - } - }); - }; - getPathfromRoutes(routeName, userRoutes); - return path; - }, - /* 判断当前路由和子路由中是否存在为routeName的路由 */ - hasPathinAllPath(routeName: string, userRoutes: AppRoute.Route) { - if (userRoutes.name === routeName) { - return true; - } - if (userRoutes.children && userRoutes.children.length !== 0) { - const arr: boolean[] = []; - userRoutes.children.forEach((item) => { - arr.push(this.hasPathinAllPath(routeName, item)); - }); - return arr.some((item) => { - return item; - }); - } - return false; - }, - /* 设置当前高亮的菜单key */ - setActiveMenu(key: string) { - this.activeMenu = key; - }, - /* 生成侧边菜单的数据 */ - createMenus(userRoutes: AppRoute.Route[]) { - this.userRoutes = userRoutes; - this.menus = this.transformAuthRoutesToMenus(userRoutes); - }, - /* 初始化动态路由 */ - async initDynamicRoute() { - // 根据用户id来获取用户的路由 - const { userId } = getUserInfo(); - const { data } = await fetchUserRoutes(userId); - // 根据用户返回的路由表来生成真实路由 - const appRoutes = await createDynamicRoutes(data); - // 生成侧边菜单 - await this.createMenus(data); - // 插入路由表 - router.addRoute(appRoutes); - }, - /* 初始化静态路由 */ - async initStaticRoute() { - // 根据静态路由表来生成真实路由 - const appRoutes = await createDynamicRoutes(staticRoutes); - // 生成侧边菜单 - await this.createMenus(staticRoutes); - // 插入路由表 - router.addRoute(appRoutes); - }, - //* 将返回的路由表渲染成侧边栏 */ - transformAuthRoutesToMenus(userRoutes: AppRoute.Route[]): MenuOption[] { - return userRoutes - .filter((item) => { - return !item.meta.hide; - }) - .map((item) => { - const target: MenuOption = { - label: item.meta.title, - key: item.path, - }; - // 判断有无图标 - if (item.meta.icon) { - target.icon = renderIcon(item.meta.icon); - } - // 判断子元素 - if (item.children) { - const children = this.transformAuthRoutesToMenus(item.children); - // 只有子元素有且不为空时才添加 - if (children.length !== 0) { - target.children = children; - } - } - return target; - }); - }, - async initAuthRoute() { - this.isInitAuthRoute = false; - if (this.authRouteMode === 'dynamic') { - await this.initDynamicRoute(); - } else { - await this.initStaticRoute(); - } - this.isInitAuthRoute = true; - }, - }, + state: (): RoutesStatus => { + return { + userRoutes: [], + isInitAuthRoute: false, + menus: [], + activeMenu: null, + authRouteMode: import.meta.env.VITE_AUTH_ROUTE_MODE, + cacheRoutes: [], + }; + }, + actions: { + resetRouteStore() { + this.resetRoutes(); + this.$reset(); + }, + resetRoutes() { + /* 删除后面添加的路由 */ + router.removeRoute('appRoot'); + }, + /* 根据当前路由的name生成面包屑数据 */ + createBreadcrumbFromRoutes(routeName = '/', userRoutes: AppRoute.Route[]) { + const path: AppRoute.Route[] = []; + // 筛选所有包含目标的各级路由组合成一维数组 + const getPathfromRoutes = (routeName: string, userRoutes: AppRoute.Route[]) => { + userRoutes.forEach((item) => { + if (this.hasPathinAllPath(routeName, item)) { + path.push(item); + if (item.children && item.children.length !== 0) { + getPathfromRoutes(routeName, item.children); + } + } + }); + }; + getPathfromRoutes(routeName, userRoutes); + return path; + }, + /* 判断当前路由和子路由中是否存在为routeName的路由 */ + hasPathinAllPath(routeName: string, userRoutes: AppRoute.Route) { + if (userRoutes.name === routeName) { + return true; + } + if (userRoutes.children && userRoutes.children.length !== 0) { + const arr: boolean[] = []; + userRoutes.children.forEach((item) => { + arr.push(this.hasPathinAllPath(routeName, item)); + }); + return arr.some((item) => { + return item; + }); + } + return false; + }, + /* 设置当前高亮的菜单key */ + setActiveMenu(key: string) { + this.activeMenu = key; + }, + /* 生成侧边菜单的数据 */ + createMenus(userRoutes: AppRoute.Route[]) { + this.userRoutes = userRoutes; + this.menus = this.transformAuthRoutesToMenus(userRoutes); + }, + /* 初始化动态路由 */ + async initDynamicRoute() { + // 根据用户id来获取用户的路由 + const { userId } = getUserInfo(); + const { data: routes } = await fetchUserRoutes(userId); + // 根据用户返回的路由表来生成真实路由 + const appRoutes = await createDynamicRoutes(routes); + // 生成侧边菜单 + await this.createMenus(routes); + // 插入路由表 + router.addRoute(appRoutes); + }, + /* 初始化静态路由 */ + async initStaticRoute() { + // 根据静态路由表来生成真实路由 + const appRoutes = await createDynamicRoutes(staticRoutes); + // 生成侧边菜单 + await this.createMenus(staticRoutes); + // 插入路由表 + router.addRoute(appRoutes); + }, + //* 将返回的路由表渲染成侧边栏 */ + transformAuthRoutesToMenus(userRoutes: AppRoute.Route[]): MenuOption[] { + return userRoutes + .filter((item) => { + return !item.meta.hide; + }) + .map((item) => { + const target: MenuOption = { + label: item.meta.title, + key: item.path, + }; + // 判断有无图标 + if (item.meta.icon) { + target.icon = renderIcon(item.meta.icon); + } + // 判断子元素 + if (item.children) { + const children = this.transformAuthRoutesToMenus(item.children); + // 只有子元素有且不为空时才添加 + if (children.length !== 0) { + target.children = children; + } + } + return target; + }); + }, + async initAuthRoute() { + this.isInitAuthRoute = false; + if (this.authRouteMode === 'dynamic') { + await this.initDynamicRoute(); + } else { + await this.initStaticRoute(); + } + this.isInitAuthRoute = true; + }, + }, }); diff --git a/src/utils/storage.ts b/src/utils/storage.ts index bd52d08..83654c2 100644 --- a/src/utils/storage.ts +++ b/src/utils/storage.ts @@ -5,72 +5,72 @@ const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7; const prefix = import.meta.env.VITE_STORAGE_PREFIX as string; interface StorageData { - value: any; - expire: number | null; + 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); + const storageData: StorageData = { + value, + expire: expire !== null ? new Date().getTime() + expire * 1000 : null, + }; + const json = JSON.stringify(storageData); + localStorage.setItem(prefix + key, json); }; export const getLocal = (key: string) => { - const json = localStorage.getItem(prefix + key); - if (!json) return null; + const json = localStorage.getItem(prefix + key); + if (!json) return null; - let storageData: StorageData | null = null; - storageData = JSON.parse(json as string); + 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; - } - } - removeLocal(key); - return null; + if (storageData) { + const { value, expire } = storageData; + if (expire === null || expire >= Date.now()) { + return value; + } + } + removeLocal(key); + return null; }; export const removeLocal = (key: string): void => { - localStorage.removeItem(prefix + key); + localStorage.removeItem(prefix + key); }; export const clearLocal = (): void => { - localStorage.clear(); + localStorage.clear(); }; /** * sessionStorage部分操作 */ export function setSession(key: string, value: unknown) { - const json = JSON.stringify(value); - sessionStorage.setItem(prefix + key, json); + 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 { - // 防止解析失败 - } - } - return data; + const json = sessionStorage.getItem(prefix + key); + let data: T | null = null; + if (json) { + try { + data = JSON.parse(json); + } catch { + // 防止解析失败 + } + } + return data; } export function removeSession(key: string) { - window.sessionStorage.removeItem(prefix + key); + window.sessionStorage.removeItem(prefix + key); } export function clearSession() { - window.sessionStorage.clear(); + window.sessionStorage.clear(); } diff --git a/src/views/list/commonList/index.vue b/src/views/list/commonList/index.vue index f94df2e..d14108c 100644 --- a/src/views/list/commonList/index.vue +++ b/src/views/list/commonList/index.vue @@ -1,29 +1,76 @@