From b6d5b0796de4d0b66c0f33c335ec991d44f64ef2 Mon Sep 17 00:00:00 2001 From: Vben Date: Thu, 17 Jun 2021 23:25:31 +0800 Subject: [PATCH] feat(axios): added authenticationScheme configuration,fix #774 --- CHANGELOG.zh_CN.md | 1 + src/api/sys/upload.ts | 2 +- src/api/sys/user.ts | 2 +- src/store/modules/user.ts | 7 +----- src/utils/http/axios/Axios.ts | 8 +++---- src/utils/http/axios/axiosCancel.ts | 1 - src/utils/http/axios/axiosTransform.ts | 8 +++++-- src/utils/http/axios/checkStatus.ts | 4 ++-- src/utils/http/axios/index.ts | 23 ++++++++++--------- .../http/axios/types.ts => types/axios.d.ts | 2 +- 10 files changed, 28 insertions(+), 30 deletions(-) rename src/utils/http/axios/types.ts => types/axios.d.ts (96%) diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md index 61fa4179..2de64681 100644 --- a/CHANGELOG.zh_CN.md +++ b/CHANGELOG.zh_CN.md @@ -16,6 +16,7 @@ - **Preview** 新增`createImgPreview`图片预览函数 - **Setup** 新增引导页示例 - **Tests** 添加 jest 测试套件，暂不支持 Vue 组件单测 +- **Axios** 新增`authenticationScheme`配置，用于指定认证方案 ### 🐛 Bug Fixes diff --git a/src/api/sys/upload.ts b/src/api/sys/upload.ts index c3a574a3..1f1b4389 100644 --- a/src/api/sys/upload.ts +++ b/src/api/sys/upload.ts @@ -1,6 +1,6 @@ import { UploadApiResult } from './model/uploadModel'; import { defHttp } from '/@/utils/http/axios'; -import { UploadFileParams } from '/@/utils/http/axios/types'; +import { UploadFileParams } from '/#/axios'; import { useGlobSetting } from '/@/hooks/setting'; const { uploadUrl = '' } = useGlobSetting(); diff --git a/src/api/sys/user.ts b/src/api/sys/user.ts index d60f2d8b..c5a08e26 100644 --- a/src/api/sys/user.ts +++ b/src/api/sys/user.ts @@ -1,7 +1,7 @@ import { defHttp } from '/@/utils/http/axios'; import { LoginParams, LoginResultModel, GetUserInfoModel } from './model/userModel'; -import { ErrorMessageMode } from '/@/utils/http/axios/types'; +import { ErrorMessageMode } from '/#/axios'; enum Api { Login = '/login', diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index 9b2297a2..6f8ac2b7 100644 --- a/src/store/modules/user.ts +++ b/src/store/modules/user.ts @@ -1,18 +1,13 @@ import type { UserInfo } from '/#/store'; -import type { ErrorMessageMode } from '/@/utils/http/axios/types'; - +import type { ErrorMessageMode } from '/#/axios'; import { defineStore } from 'pinia'; import { store } from '/@/store'; - import { RoleEnum } from '/@/enums/roleEnum'; import { PageEnum } from '/@/enums/pageEnum'; import { ROLES_KEY, TOKEN_KEY, USER_INFO_KEY } from '/@/enums/cacheEnum'; - import { getAuthCache, setAuthCache } from '/@/utils/auth'; import { GetUserInfoModel, LoginParams } from '/@/api/sys/model/userModel'; - import { getUserInfo, loginApi } from '/@/api/sys/user'; - import { useI18n } from '/@/hooks/web/useI18n'; import { useMessage } from '/@/hooks/web/useMessage'; import { router } from '/@/router'; diff --git a/src/utils/http/axios/Axios.ts b/src/utils/http/axios/Axios.ts index 41ee7fc1..855ffb53 100644 --- a/src/utils/http/axios/Axios.ts +++ b/src/utils/http/axios/Axios.ts @@ -1,15 +1,13 @@ import type { AxiosRequestConfig, AxiosInstance, AxiosResponse } from 'axios'; -import type { RequestOptions, Result, UploadFileParams } from './types'; +import type { RequestOptions, Result, UploadFileParams } from '../../../../types/axios'; import type { CreateAxiosOptions } from './axiosTransform'; - import axios from 'axios'; import qs from 'qs'; import { AxiosCanceler } from './axiosCancel'; import { isFunction } from '/@/utils/is'; import { cloneDeep } from 'lodash-es'; - import { ContentTypeEnum } from '/@/enums/httpEnum'; -import { RequestEnum } from '../../../enums/httpEnum'; +import { RequestEnum } from '/@/enums/httpEnum'; export * from './axiosTransform'; @@ -93,7 +91,7 @@ export class VAxios { !ignoreCancel && axiosCanceler.addPending(config); if (requestInterceptors && isFunction(requestInterceptors)) { - config = requestInterceptors(config); + config = requestInterceptors(config, this.options); } return config; }, undefined); diff --git a/src/utils/http/axios/axiosCancel.ts b/src/utils/http/axios/axiosCancel.ts index 98d59c21..081233ea 100644 --- a/src/utils/http/axios/axiosCancel.ts +++ b/src/utils/http/axios/axiosCancel.ts @@ -1,6 +1,5 @@ import type { AxiosRequestConfig, Canceler } from 'axios'; import axios from 'axios'; - import { isFunction } from '/@/utils/is'; // Used to store the identification and cancellation function of each request diff --git a/src/utils/http/axios/axiosTransform.ts b/src/utils/http/axios/axiosTransform.ts index d66c5a3f..5c423411 100644 --- a/src/utils/http/axios/axiosTransform.ts +++ b/src/utils/http/axios/axiosTransform.ts @@ -2,9 +2,10 @@ * Data processing class, can be configured according to the project */ import type { AxiosRequestConfig, AxiosResponse } from 'axios'; -import type { RequestOptions, Result } from './types'; +import type { RequestOptions, Result } from '/#/axios'; export interface CreateAxiosOptions extends AxiosRequestConfig { + authenticationScheme?: string; urlPrefix?: string; transform?: AxiosTransform; requestOptions?: RequestOptions; @@ -30,7 +31,10 @@ export abstract class AxiosTransform { /** * @description: 请求之前的拦截器 */ - requestInterceptors?: (config: AxiosRequestConfig) => AxiosRequestConfig; + requestInterceptors?: ( + config: AxiosRequestConfig, + options: CreateAxiosOptions + ) => AxiosRequestConfig; /** * @description: 请求之后的拦截器 diff --git a/src/utils/http/axios/checkStatus.ts b/src/utils/http/axios/checkStatus.ts index eaee32fd..762bb000 100644 --- a/src/utils/http/axios/checkStatus.ts +++ b/src/utils/http/axios/checkStatus.ts @@ -1,5 +1,4 @@ -import type { ErrorMessageMode } from './types'; - +import type { ErrorMessageMode } from '/#/axios'; import { useMessage } from '/@/hooks/web/useMessage'; import { useI18n } from '/@/hooks/web/useI18n'; // import router from '/@/router'; @@ -9,6 +8,7 @@ import { useUserStoreWidthOut } from '/@/store/modules/user'; const { createMessage, createErrorModal } = useMessage(); const error = createMessage.error!; + export function checkStatus( status: number, msg: string, diff --git a/src/utils/http/axios/index.ts b/src/utils/http/axios/index.ts index aac3f1dd..ac52c33e 100644 --- a/src/utils/http/axios/index.ts +++ b/src/utils/http/axios/index.ts @@ -2,22 +2,17 @@ // The axios configuration can be changed according to the project, just change the file, other files can be left unchanged import type { AxiosResponse } from 'axios'; -import type { RequestOptions, Result } from './types'; +import type { RequestOptions, Result } from '/#/axios'; import type { AxiosTransform, CreateAxiosOptions } from './axiosTransform'; - import { VAxios } from './Axios'; import { checkStatus } from './checkStatus'; - import { useGlobSetting } from '/@/hooks/setting'; import { useMessage } from '/@/hooks/web/useMessage'; - import { RequestEnum, ResultEnum, ContentTypeEnum } from '/@/enums/httpEnum'; - import { isString } from '/@/utils/is'; import { getToken } from '/@/utils/auth'; import { setObjToUrlParams, deepMerge } from '/@/utils'; import { useErrorLogStoreWithOut } from '/@/store/modules/errorLog'; - import { useI18n } from '/@/hooks/web/useI18n'; import { joinTimestamp, formatRequestDate } from './helper'; @@ -34,14 +29,14 @@ const transform: AxiosTransform = { */ transformRequestHook: (res: AxiosResponse, options: RequestOptions) => { const { t } = useI18n(); - const { isTransformRequestResult, isReturnNativeResponse } = options; + const { isTransformResponse, isReturnNativeResponse } = options; // 是否返回原生响应头 比如：需要获取响应头时使用该属性 if (isReturnNativeResponse) { return res; } // 不进行任何处理，直接返回 // 用于页面代码可能需要直接获取code，data，message这些信息时开启 - if (!isTransformRequestResult) { + if (!isTransformResponse) { return res.data; } // 错误的时候返回 @@ -124,12 +119,14 @@ const transform: AxiosTransform = { /** * @description: 请求拦截器处理 */ - requestInterceptors: (config) => { + requestInterceptors: (config, options) => { // 请求之前处理config const token = getToken(); if (token) { // jwt token - config.headers.Authorization = token; + config.headers.Authorization = options.authenticationScheme + ? `${options.authenticationScheme} ${token}` + : token; } return config; }, @@ -183,6 +180,10 @@ function createAxios(opt?: Partial) { return new VAxios( deepMerge( { + // See https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication#authentication_schemes + // authentication schemes，e.g: Bearer + // authenticationScheme: 'Bearer', + authenticationScheme: '', timeout: 10 * 1000, // 基础接口地址 // baseURL: globSetting.apiUrl, @@ -200,7 +201,7 @@ function createAxios(opt?: Partial) { // 是否返回原生响应头 比如：需要获取响应头时使用该属性 isReturnNativeResponse: false, // 需要对返回数据进行处理 - isTransformRequestResult: true, + isTransformResponse: true, // post请求的时候添加参数到url joinParamsToUrl: false, // 格式化提交参数时间 diff --git a/src/utils/http/axios/types.ts b/types/axios.d.ts similarity index 96% rename from src/utils/http/axios/types.ts rename to types/axios.d.ts index 8ba13189..628146e7 100644 --- a/src/utils/http/axios/types.ts +++ b/types/axios.d.ts @@ -6,7 +6,7 @@ export interface RequestOptions { // Format request parameter time formatDate?: boolean; // Whether to process the request result - isTransformRequestResult?: boolean; + isTransformResponse?: boolean; // 是否返回原生响应头 比如：需要获取响应头时使用该属性 isReturnNativeResponse?: boolean; // Whether to join url -- GitLab