@liuyi_npm/axios

1.AbortHelper

基于 CancelToken 及 AbortController 支持 http 请求取消。

由于 CancelToken 由 axios 提供，为了减少本库对于 axios 的依赖，因此如果需要使用 CancelToken，需要手动传入。

2.CacheHelper

支持 http 请求缓存。

request 对象只要固定支持如下三种方法即可（不依赖第三方库使用的是 axios 或者 ofetch）：

const request = {
	get,
	post,
	file,
}

那么可以这么使用：

import { CacheHelper } from '@liuyi_npm/axios'

export const { cacheAxios } = new CacheHelper({ request })

3.CryptoHelper

基于 crypto-js 对接口进行对称加解密的 JavaScript 方法库。

3-1.基础使用

@liuyi_npm/axios 中的 CryptoHelper 默认就是基于内置加解密规则的。

3-1-1.Webpack

在大多数 webpack 项目场景下，都无需作过多配置。只需要如此使用：

import { CryptoHelper } from '@liuyi_npm/axios'

const appTarget = process.env.VUE_APP_TARGET

// 1.对称加密配置
const { encryptRequest, decryptResponse } = new CryptoHelper({
	appTarget,
	// 必传
	requestSource: 'portal',
	// PROD环境下必传或者通过函数自定义配置
	config: {
		key: '',
		iv: ''
	}
})

// 2.非对称加密配置
const { encryptRequest, decryptResponse } = new CryptoHelper({
	appTarget,
	cryptoType: 'RSA',
	// 必传
	requestSource: 'portal',
	// PROD环境下必传或者通过函数自定义配置
	config: {
		publicKey: ''
	}
})

// 在axios的请求拦截器或者相应拦截器中使用
axios.interceptors.request.use(request => {
	return encryptRequest(requset)
})
axios.interceptors.response.use(response => {
	response = decryptResponse(response)
	return response.data
})

3-1-2.Vite

在说明 Vite 对应处理方式之前，首先明确的一点是，@liuyi_npm/axios 是 umd 规范库，也可以说是 commonjs 库。

这是因为：

1. @liuyi_npm/axios 依赖的 crypto-js 遵循的是 commonjs 规范，而 jsencrypt/lib/index 则是 ESM 规范。
2. Webpack 对于构建 ESM 库依然还是实验性质，笔者尝试了下，发现 Webpack 没有对于第三方 commonjs 依赖作额外的 ESM 处理。

而 Vite 不同于 Webpack 的一点在于：

1. Webpack 是将 ESM 转化为 __webpack__require__，而 Vite 则是支持原生 ESM 模块（开发环境下会有 commonjs 等依赖预分析，而生产环境下则不会，这也是为什么说 Vite 开发与构建不一致的原因）。
2. Webpack 支持 process.env，Vite 支持 import.meta.env

因此，针对以上两个问题，在 Vite 环境下，对于 @liuyi_npm/axios，需要作如下处理：

1. Vite 在开发和构建中读取统一的 umd 规范。
2. Vite 环境不推荐使用内置的 process.env[envField] 配置，需要使用 appTarget 手动表明当前 Vite 环境。

以在 vite 中使用 ofetch 进行非对称加解密为例：

import * as pkg from '@liuyi_npm/axios'
const { CacheHelper, CryptoHelper } = pkg.default || pkg

const appTarget = import.meta.env.VITE_APP_TARGET

const { encryptRequest, decryptResponse } = new CryptoHelper({
	httpType: 'ofetch',
	appTarget,
	cryptoType: 'RSA',
	requestSource: 'request-source',
	config: {
		publicKey: ''
	}
})

3-2.自定义配置

为了保证 CryptoHelper 能够适用于自定义的加解密规则，因此提供了一些自定义参数来覆盖默认规则。

| 参数 | 含义 | 备注 | | :--------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | enable | 是否启用加解密 | 默认 UAT 和 PROD 环境下开启。| | httpType | http 请求方式 | axios 或者 ofetch。 | | cryptoType | 对称加密或者非对称加密 | AES 或者 RSA，默认为 AES。 | | requestSource | 请求来源 | 默认为 '' | | config | 配置密钥 key 和偏移量 iv 以及公钥 publicKey | 默认为{}。key 和 iv 以及 publicKey 在DEV、 SIT、UAT 环境下都有默认值；而 PROD 环境下则需要手动配置。以上规则可以通过将 config 声明为函数，进行自定义覆盖。 | | requestSourceField | 请求来源字段 | 默认为 request-source。 | | appTarget | 环境标识名，优先级高于 envField | 默认为 '', 可设置为 DEV SIT UAT PROD。 | | ~~envField~~ | 环境标识字段 | 默认为 VUE_APP_TARGET。会根据 process.env.VUE_APP_TARGET 来判断环境。| | disableFieldInAxios | 设置特定接口取消加解密 | 默认为 closeCrypto。即在 axios 中的 config 手动声明 closeCrypto 为 true 或 false。 | | supportRequestSourceCancel | 设置当 requestSource未设置时，是否cancel接口 | 默认为 true。|

3-3.架构组规则

网关拦截及Crypto加解密

3-4.内置加解密规则

从架构组规则，可以整理、剥离出目前整个系统的内置加解密规则。

内置的加解密规则，大方向分为三种：

1. 加解密规则的具体实现；
2. 各环境下的默认配置。
3. 对称加密 AES 与非对称加密 RSA

关于加解密规则的具体实现，分为三部分：

1. 根据请求头中是否携带 request-source，分为未知请求源与已知请求源；

2. 上传接口，请求不加密、响应加密。下载接口，请求加密、响应不加密；

3. 定向控制接口是否走加解密。

关于各环境下的默认配置，分为两部分：

1. UAT 和 PROD 默认开启加解密；

2. DEV、SIT 以及 UAT 的 key 和 iv 都是默认的。而 PROD 环境下的 key 和 iv，架构组会生成唯一的。

关于对称加密与非对称加密：

1. cryptoType 分为 AES 和 RSA 两种，分别对应对称加密和非对称加密。
2. 为了保证向下兼容，不设置的话，cryptoType 默认为 AES。