HTTP 授权

释放双眼,带上耳机,听听看~!
web前端技术博客,简洁至上,专注web前端学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。

HTTP 授权

需求分析

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

axios 库也允许你在请求配置中配置 auth 属性,auth 是一个对象结构,包含 usernamepassword 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 属性。下一节课我们来实现自定义合法状态码功能。

人已赞赏
杂七杂八

请求模块单元测试

2020-12-18 14:10:08

杂七杂八

前言

2020-12-18 14:26:43

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索