jwt的token刷新,通过refreshToken刷新后,axios调用触发刷新的token的接口会返回失败,导致页面加载数据未空,怎么处理使其正常?
时间: 2024-01-01 13:05:25 浏览: 156
react-jwt-refresh-token:使用 Axios 拦截器构建 React JWT 刷新令牌示例 - React.js 中的刷新令牌,Axios 静默刷新 JWT 令牌示例
这种情况可能是因为在刷新token的过程中,axios调用接口的token还没有更新为新的token。你可以在axios拦截器中进行处理,判断响应状态码是否为401(即token失效),如果是则在刷新token后重新发送之前的请求。
具体实现步骤如下:
1. 在axios的请求拦截器中,为所有请求添加token。
```javascript
axios.interceptors.request.use(
config => {
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
},
error => {
return Promise.reject(error)
}
)
```
2. 在axios的响应拦截器中,判断响应状态码是否为401,如果是则刷新token并重新发送之前的请求。
```javascript
axios.interceptors.response.use(
response => {
return response
},
error => {
const originalRequest = error.config
if (error.response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true
return axios.post('/api/refresh_token', { refreshToken: localStorage.getItem('refreshToken') })
.then(response => {
const token = response.data.token
const refreshToken = response.data.refreshToken
localStorage.setItem('token', token)
localStorage.setItem('refreshToken', refreshToken)
axios.defaults.headers.common['Authorization'] = `Bearer ${token}`
return axios(originalRequest)
})
}
return Promise.reject(error)
}
)
```
这样做的原理是,在刷新token后,重新发送之前的请求,此时axios会自动添加新的token,并且保证了请求不会丢失。
阅读全文