Skip to main content

[TS] ts-axios(16) - HTTP授权与自定义状态码

需求分析​

HTTP 协议中的 Authorization 请求 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)
})

代码实现​

首先修改一下类型定义。

types/index.ts：

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

export interface AxiosBasicCredentials {
  username: string
  password: string
}

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

core/mergeConfig.ts：

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

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

core/xhr.ts：

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

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

demo 编写​

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

另外，我们在 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')
  }
})

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

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

需求分析​

之前 ts-axios 在处理响应结果的时候，认为 HTTP status 在 200 和 300 之间是一个合法值，在这个区间之外则创建一个错误。有些时候我们想自定义这个规则，比如认为 304 也是一个合法的状态码，所以我们希望 ts-axios 能提供一个配置，允许我们自定义合法状态码规则。如下：

axios.get('/more/304', {
  validateStatus(status) {
    return status >= 200 && status < 400
  }
}).then(res => {
  console.log(res)
}).catch((e: AxiosError) => {
  console.log(e.message)
})

通过在请求配置中配置一个 validateStatus 函数，它可以根据参数 status 来自定义合法状态码的规则。

代码实现​

首先修改一下类型定义。

types/index.ts：

export interface AxiosRequestConfig {
  // ...
  validateStatus?: (status: number) => boolean
}

然后我们来修改默认配置规则。

defaults.ts：

validateStatus(status: number): boolean {
  return status >= 200 && status < 300
}

添加默认合法状态码的校验规则。然后再请求后对响应数据的处理逻辑。

core/xhr.ts：

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

function handleResponse(response: AxiosResponse): void {
  if (!validateStatus || validateStatus(response.status)) {
    resolve(response)
  } else {
    reject(
      createError(
        `Request failed with status code ${response.status}`,
        config,
        null,
        request,
        response
      )
    )
  }
}

如果没有配置 validateStatus 以及 validateStatus 函数返回的值为 true 的时候，都认为是合法的，正常 resolve(response)，否则都创建一个错误。

demo 编写​

axios.get('/more/304').then(res => {
  console.log(res)
}).catch((e: AxiosError) => {
  console.log(e.message)
})

axios.get('/more/304', {
  validateStatus(status) {
    return status >= 200 && status < 400
  }
}).then(res => {
  console.log(res)
}).catch((e: AxiosError) => {
  console.log(e.message)
})

server.js 中我们编写了这个路由接口


router.get('/more/304', function(req, res) {
  res.status(304)
  res.end()
})

接口返回 304 状态码，对于默认的请求我们会输出一条错误信息。第二个请求中我们配置了自定义合法状态码规则，区间在 200 和 400 之间，这样就不会报错，而是可以正常输出响应对象。

至此 ts-axios 实现了自定义合法状态码功能，用户可以配置 validateStatus 自定义合法状态码规则。之前有同学会质疑 ts-axios 对于请求 url 参数的序列化处理规则，下一节课我们来实现自定义参数序列化规则功能。