npm package: @liuyi_npm/axios
Description: <p align="left"> 	<a href="https://www.npmjs.com/package/axios"><img alt="axios@^1.5.1" src="https://img.shields.io/badge/axios-%5E1.5.1-blue"></a> 	<a href="https://www.npmjs.com/package/ofetch"><img alt="ofetch@^1.4.1" src="https://img.shields.io/badge/
Author: liuyi
Latest version: 2.5.1

# @liuyi_npm/axios

<p align="left">
	<a href="https://www.npmjs.com/package/axios"><img alt="axios@^1.5.1" src="https://img.shields.io/badge/axios-%5E1.5.1-blue"></a>
	<a href="https://www.npmjs.com/package/ofetch"><img alt="ofetch@^1.4.1" src="https://img.shields.io/badge/ofetch-%5E1.4.1-blue"></a>
</p>

## 1.AbortHelper

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

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

## 2.CacheHelper

**支持 `http` 请求缓存**。

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

```js
const request = {
	get,
	post,
	file,
}
```

那么可以这么使用：

```js
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` 项目场景下，都无需作过多配置。只需要如此使用：

```js
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` 规范](https://carljin.com/posts/umd-package-in-vite/)。
2. `Vite` 环境不推荐使用内置的 `process.env[envField]` 配置，**需要使用 `appTarget` 手动表明当前 `Vite` 环境**。

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

```js
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加解密](https://wiki.prodcbi.com/pages/viewpage.action?pageId=80975421)

### 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`。