Authorization，即授权，是验证用户身份的一个过程。服务器端通过 Authorization 头向用户发放一个 token，之后用户每次向服务器请求资源时需要在请求头中携带这个 token，服务器端根据 token 中的信息验证用户身份和权限。常用的 Authorization 方式包括基本认证（Basic Authentication）、Bearer 令牌认证（Bearer Token Authentication）等。
扩展：如果你想尝试更便捷、高效的方式来调试 API，那么可以使用 Apifox。Apifox 提供了直观的界面，让你轻松管理并调试项目接口。
Axios 中添加 Authorization
在 Axios 中，可以通过以下方式携带 Authorization 信息：
1.在请求配置中添加 headers 字段，将 Authorization 作为一个头信息传递:
axios.get('/user', {
headers: {
Authorization: 'Bearer ${token}'
}
})
2.使用 Axios 实例的 defaults.headers 配置默认的 Authorization:
const axiosInstance = axios.create({
baseURL: 'https://some-domain.com/api/',
headers: {
Authorization: 'Bearer ${token}'
}
});
3.将 token 信息直接拼接在 URL 参数中:
axios.get('/user?token=${token}')实践案例
下面是一个完整的案例，演示了如何通过自定义 Axios 实例添加 Authorization 头:
// 创建 axios 实例
const axiosInstance = axios.create({
baseURL: 'https://some-domain.com/api/',
});
// 添加请求拦截器
axiosInstance.interceptors.request.use(
config => {
// 在这里通过本地存储或状态管理获取 token
const token = localStorage.getItem('token');
// 如果存在 token,在请求头中携带
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
error => {
return Promise.reject(error);
}
);
// 发送请求
axiosInstance.get('/user/12345');上面代码创建一个 Axios 实例，并添加一个请求拦截器，在拦截器中判断如果存在 token，就在请求头中携带，最后使用这个 Axios 实例发送请求。
注意事项
- 不要将 token 信息直接写死在代码中,应该从本地存储或者状态管理中获取
- 携带 token 的方法有多种,可以根据需求选择 headers 或 URL 参数
- 请求方法、请求头、URL 应该采用常量管理,便于统一修改
使用 Apifox 来 Mock 数据
Apifox 是一个比 Postman 更强大的接口测试工具，Apifox = Postman + Swagger + Mock + JMeter，Apifox 支持调试 http(s)、WebSocket、Socket、gRPC、Dubbo 等协议的接口，并且集成了 IDEA 插件。在后端人员写完服务接口时，测试阶段可以通过 Apifox 来校验接口的正确性，图形化界面极大的方便了项目的上线效率。
更为重要的是，Apifox 能够 Mock 数据，其集成了 Mock.js 库，允许你自定义规则，并且可以编写脚本，强大的 Mock 功能可以让前端开发人员不再苦苦等待后端提供接口，自己就能提前造各种各样的数据出来，可视化操作让你点点鼠标就能生成可观的人性化数据。
总结
在 Axios 中，可以通过在请求配置中添加 headers 字段、使用默认 headers 以及直接在 URL 中添加参数等方式携带 Authorization 信息。为了便于统一管理，可以创建 Axios 实例并使用拦截器来实现在所有请求中携带 token。需要注意 token 信息要从安全处获取，同时请求相关配置也要做常量管理。
知识扩展：
参考链接:
Axios github 官网：https://github.com/axios/axios#axioscreateconfig