怎么能无感知刷新token,以下面的项目经历做总结:
我是直接在main.js中设置了请求拦截器,作用是:
- 每次请求时,带上token
- 在拦截器中判断是否有返回token,有则将本地的token替换成返回的token
- 后端设置响应码http code为401,返回此值时,此时用户的token过期/失效,删除本地存储的token,强制用户跳转到登录页
new Vue({
router,
store,
created() {
// http request 请求拦截器,有token值则配置上token值
axios.interceptors.request.use(
config => {
let token = window.sessionStorage.getItem('token')
// 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了
if (token) {
config.headers.Authorization = token
}
return config
},
err => {
return Promise.reject(err)
})
// http response服务器响应拦截器
// 自定义的 axios 响应拦截器
axios.interceptors.response.use((response) => {
// 判断一下响应中是否有 token,如果有就直接使用此 token 替换掉本地的 token
var token = response.headers.authorization
if (token) {
// 如果 header 中存在 token,替换本地的 token
window.sessionStorage.setItem('token', token)
}
return response
}, (error) => {
switch (error.response.status) {
// 如果响应中的 http code 为 401,则此用户可能 token失效,清除本地的数据并将用户重定向至登录页面
case 401:
this.$message.error('登录已过期,请重新登录')
window.sessionStorage.clear()
this.$router.push('/login')
break
}
return Promise.reject(error)
})
},
render: h => h(App)
}).$mount('#app')