一、为什么需要在请求头中携带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的操作,以保证用户操作的连续性,提高了项目的安全性。