### 彪哥

爱好前端

- 初识 TypeScript

- TypeScript 常用语法

- ts-axios 项目初始化

- ts-axios 基础功能实现

- ts-axios 异常情况处理

- ts-axios 接口扩展

- ts-axios 拦截器实现

- ts-axios 配置化实现

- ts-axios 取消功能实现

- ts-axios 更多功能实现

  - withCredentials
  - XSRF 防御
  - 上传和下载的进度监控
  - HTTP 授权
    - 需求分析
    - 代码实现
    - demo 编写
  - 自定义合法状态码
  - 自定义参数序列化
  - baseURL
  - 静态方法扩展

- ts-axios 单元测试

- ts-axios 部署与发布

- 《TypeScript 从零实现 axios》
- ts-axios 更多功能实现

HuangYi
2020-01-05
目录

# HTTP 授权

# # HTTP 授权

## # 需求分析

HTTP 协议中的 Authorization
(opens new window) 请求 header 会包含服务器用于验证用户代理身份的凭证，通常会在服务器返回 401 Unauthorized 状态码以及 WWW-Authenticate 消息头之后在后续请求中发送此消息头。

axios 库也允许你在请求配置中配置 `auth` 属性，`auth` 是一个对象结构，包含 `username` 和 `password` 2 个属性。一旦用户在请求的时候配置这俩属性，我们就会自动往 HTTP 的 请求 header 中添加 `Authorization` 属性，它的值为 `Basic 加密串`。 这里的加密串是 `username:password` base64 加密后的结果。

    axios.post('/more/post', {
      a: 1
    }, {
      auth: {
        username: 'Yee',
        password: '123456'
      }
    }).then(res => {
      console.log(res)
    })

1
2
3
4
5
6
7
8
9
10

## # 代码实现

首先修改一下类型定义。

`types/index.ts`：

    export interface AxiosRequestConfig {
      // ...
      auth?: AxiosBasicCredentials
    }

    export interface AxiosBasicCredentials {
      username: string
      password: string
    }

1
2
3
4
5
6
7
8
9

接着修改合并规则，因为 auth 也是一个对象格式，所以它的合并规则是 `deepMergeStrat`。

`core/mergeConfig.ts`：

    const stratKeysDeepMerge = ['headers', 'auth']

1

然后修改发送请求前的逻辑。

`core/xhr.ts`：

    const {
      /*...*/
      auth
    } = config

    if (auth) {
      headers['Authorization'] = 'Basic ' + btoa(auth.username + ':' + auth.password)
    }

1
2
3
4
5
6
7
8

## # demo 编写

    axios.post('/more/post', {
      a: 1
    }, {
      auth: {
        username: 'Yee',
        password: '123456'
      }
    }).then(res => {
      console.log(res)
    })

1
2
3
4
5
6
7
8
9
10

另外，我们在 `server.js` 中对于这个路由接口写了一段小逻辑：

    router.post('/more/post', function(req, res) {
      const auth = req.headers.authorization
      const [type, credentials] = auth.split(' ')
      console.log(atob(credentials))
      const [username, password] = atob(credentials).split(':')
      if (type === 'Basic' && username === 'Yee' && password === '123456') {
        res.json(req.body)
      } else {
        res.end('UnAuthorization')
      }
    })

1
2
3
4
5
6
7
8
9
10
11

注意，这里我们需要安装第三方库 `atob` 实现 base64 串的解码。

至此，`ts-axios` 支持了 HTTP 授权功能，用户可以通过配置 auth 对象实现自动在请求 header 中添加 `Authorization` 属性。下一节课我们来实现自定义合法状态码功能。

编辑
(opens new window)
#TypeScript
上次更新: 2022/12/14, 19:36:42
上传和下载的进度监控
自定义合法状态码

← 上传和下载的进度监控 自定义合法状态码→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式