0. 系列文章

項目源碼請猛戳這里!!!

1. 前言

HTTP協議中，在請求headers中有個 Authorization屬性，該屬性里包含了服務器用於驗證用戶代理身份的憑證，通常會在服務器返回401 Unauthorized 狀態碼以及WWW-Authenticate 消息頭之后在后續請求中發送此消息頭，詳細信息可以查看這里。

在官方axios中，允許用戶在請求配置對象config中配置auth屬性，該屬性是一個對象結構，包含了 username 和 password 兩個屬性。當用戶在請求的時候配置了這兩個屬性，axios就會自動往 HTTP 的請求 headers 中添加 Authorization 屬性，它的值為 username:password 經過base64 加密后的結果。

本篇文章我們就來為我們的axios的請求配置對象上添加auth屬性，並且在發送請求前判斷用戶是否配置了該屬性，如果配置了就把它經過base64 加密后添加到請求 headers 中的 Authorization 屬性上。

2. 向請求配置對象添加屬性

在請求配置對象config中添加 auth 屬性之前，我們需要先在src/types/index.ts中的配置對象的接口類型定義AxiosRequestConfig上添加該屬性的定義，如下：

export interface AxiosRequestConfig {
  // 新增
  auth?: AxiosBasicCredentials;
}

export interface AxiosBasicCredentials {
  username: string;
  password: string;
}

3. 把屬性添加到headers上

添加好以后，我們只需在發送請求之前判斷用戶是否配置了該屬性，如果配置了就把該屬性經過base64 加密后添加到請求 headers 中的 Authorization 屬性上。

// src/core/xhr.ts

const {
    // 新增
    auth
} = config;

if (auth) {
    const username = auth.username || "";
    const password = auth.password || "";
    headers["Authorization"] = "Basic " + btoa(username + ":" + password);
}

OK，auth屬性就添加好了，是不是很簡單？接下來，我們就來編寫demo來測試下效果如何。

4. demo編寫

在 examples 目錄下創建 HTTPAuthorization目錄，在 HTTPAuthorization目錄下創建 index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>HTTPAuthorization demo</title>
  </head>
  <body>
    <script src="/__build__/HTTPAuthorization.js"></script>
  </body>
</html>

接着再創建 app.ts 作為入口文件：

import axios from "../../src/axios";

axios.get("/api/HTTPAuthorization", {
   auth:{
     username: 'NLRX',
     password: '123456'
   }
  })
  .then(res => {
    console.log(res);
  });

接着在 server/server.js 添加新的接口路由：

const atob = require("atob");
// 添加HTTP授權
router.get("/api/HTTPAuthorization", function(req, res) {
  const auth = req.headers.authorization;
  const [type, credentials] = auth.split(" ");
  const [username, password] = atob(credentials).split(":");
  res.json({
    type: type,
    username: username,
    password: password
  });
});

在服務端路由接口中，我們將收到的auth使用第三方庫atob進行Base64解碼，然后將驗證類型、username、password分別取出來，返回給前端。

最后在根目錄下的index.html中加上啟動該demo的入口：

<li><a href="examples/HTTPAuthorization">HTTPAuthorization</a></li>

OK,我們在命令行中執行：

# 同時開啟客戶端和服務端
npm run server | npm start

接着我們打開 chrome 瀏覽器，訪問 http://localhost:8000/ 即可訪問我們的 demo 了，我們點擊 HTTPAuthorization，就可以看到請求已經正常發出，並且在請求的headers中添加上了Authorization字段，並且字段值是經過Base64加密后的值，我們在服務端進行base64解碼，然后將驗證類型、username、password分別取出來返回給前端，我們在請求響應中看到解密后的信息就是我們發請求是加密的信息。

OK，以上就是為我們的axios添加HTTP授權auth屬性。

（完）

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。