您的位置:

详解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的操作,以保证用户操作的连续性,提高了项目的安全性。