从无到有：如何用axios实现请求接口携带token

2024-01-24 03:49:00

在现代web开发中，请求接口携带token是验证用户身份和授权的重要手段。本文将以流行的JavaScript库axios为例，详细介绍如何实现请求接口携带token。

第一步：在请求头中添加token

要让axios请求携带token，我们需要在请求头中添加token。这是可以通过使用axios的request拦截器来实现的。request拦截器允许我们在发送请求之前对请求进行修改，比如添加请求头。

以下是如何使用request拦截器在请求头中添加token的示例代码：

axios.interceptors.request.use((config) => {
  // 从localStorage获取token
  const token = localStorage.getItem('token');

  // 如果token存在，则将其添加到请求头中
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }

  // 返回修改后的请求配置
  return config;
});

在上面的代码中，我们首先从localStorage中获取token。然后，如果token存在，我们将其添加到请求头中，并使用Authorization头字段。最后，我们将修改后的请求配置返回给axios。

第二步：使用拦截器进行接口请求拦截

为了确保所有请求都携带token，我们可以使用axios的拦截器进行接口请求拦截。拦截器可以让我们在发送请求之前和收到响应之后对请求和响应进行处理。

以下是如何使用拦截器进行接口请求拦截的示例代码：

axios.interceptors.request.use((config) => {
  // 从localStorage获取token
  const token = localStorage.getItem('token');

  // 如果token存在，则将其添加到请求头中
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }

  // 返回修改后的请求配置
  return config;
}, (error) => {
  // 请求错误处理
  return Promise.reject(error);
});