详解axios请求头携带token

一、为什么需要在请求头中携带token？

在前后端分离的项目中，一般情况下需要使用token来验证用户的身份，并且防止未经授权的访问。而在发送请求时，需要在请求头中携带token信息，以便后端能够对用户的操作进行鉴权。如果没有携带token，则可能会导致用户无法进行正常操作或者进行了未被授权的操作。

二、如何携带token信息？

在使用axios发送请求时，可以通过设置请求头的方式来携带token信息。可以使用axios的拦截器，在请求发送前统一设置请求头信息。示例代码如下：

// 设置请求拦截器
axios.interceptors.request.use((config) => {
  // 从本地存储中获取token信息
  const token = localStorage.getItem('token');
  // 如果存在token，则将token信息设置到请求头中
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, (error) => {
  return Promise.reject(error);
});

在这段代码中，我们使用axios的请求拦截器，在请求发送前使用localStorage获取token信息，并将其设置到请求头中，以保证后端能够进行正确的鉴权。需要注意的是，实际项目中需要根据接口文档来设置请求头信息。

三、token的存储位置

为了方便在不同的页面中进行访问，token需要进行存储。常见的方法有两种：使用cookie或者localStorage。

1、使用cookie存储token

通过设置cookie来存储token信息是一种常用的方法。使用cookie可以避免在不同的页面中重复设置token信息，只需要从cookie中获取即可。示例代码如下：

// 存储token信息到cookie中
document.cookie = `token=${token}`;
// 从cookie中获取token信息
const token = document.cookie.replace(/(?:(?:^|.*;\s*)token\s*=\s*([^;]*).*$)|^.*$/, "$1");

使用cookie存储token信息时，需要注意以下几点：

1）需要设置cookie的过期时间来控制token的有效期；

2）需要设置cookie的secure属性，以保证https协议下的安全性；

3）设置cookie的时候需要注意跨域的问题。

2、使用localStorage存储token

使用localStorage来存储token信息也是一种常见的方法。与cookie不同，localStorage存储的信息不会随着请求被发送到服务端，也不会像cookie一样存在跨域的问题。示例代码如下：

// 存储token信息到localStorage中
localStorage.setItem('token', token);
// 从localStorage中获取token信息
const token = localStorage.getItem('token');

使用localStorage存储token信息时，需要注意以下几点：

1）需要进行转义处理，以防止攻击者利用localStorage来进行XSS攻击；

2）需要注意用户使用隐身模式的情况下localStorage的使用问题；

四、token的刷新机制

在实际项目中，token是有一定的有效期的，为了保证用户在有效期内能够正常进行操作，需要对token进行定期刷新。我们可以通过定期发送刷新token的请求来更新用户的token信息。示例代码如下：

// 设置响应拦截器
axios.interceptors.response.use((response) => {
  // 如果token已经过期，则进行刷新token的请求
  if (response.data.code === 401) {
    // 刷新token请求
    return axios.post('/api/refreshToken', {
      token: localStorage.getItem('token')
    }).then((res) => {
      // 更新localStorage中的token信息
      localStorage.setItem('token', res.data.token);
      // 使用新的token重新发送请求
      response.config.headers.Authorization = `Bearer ${res.data.token}`;
      return axios(response.config);
    }).catch((err) => {
      // 刷新token失败，跳转到登录页
      location.href = '/login';
    });
  }
  return response;
}, (error) => {
  return Promise.reject(error);
});

在这段代码中，我们使用axios的响应拦截器，在接收到响应后进行判断，如果返回了401状态码，则说明当前的token已经过期，需要进行刷新token的操作。首先通过发送刷新token的请求来获取新的token信息，然后将新的token信息存储到localStorage中，并使用新的token重新发送之前的请求，以保证用户操作的连续性。

五、小结

本文对axios请求头携带token的问题进行了详细的阐述。通过设置请求拦截器来统一设置请求头信息，使用cookie或localStorage来存储token信息，以及使用响应拦截器来进行定期刷新token的操作，以保证用户操作的连续性，提高了项目的安全性。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/199977.html