在后端登陆接口已经写好的情况下,前端就可以做登陆这块的处理,如果登陆成功就将后端返回的token拿到并且塞到请求头中,如果接口返回token失效的信息,则提示用户token失效,并跳转登陆页面。我们可以通过修改axios 请求拦截器来实现这些场景
// request interceptor
service.interceptors.request.use(
config => {
//从vuex获取token,塞到header中
if (store.getters.token) {
config.headers['token'] = getToken()
}
return config
},
error => {
// do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
response => {
const res = response.data
if (res.code !== 0) {
// 判断 token 失效的场景
// 如果 token 失效,则弹出确认对话框,用户点击后,清空 token 并返回登录页面
if (res.code === 401) {
MessageBox.alert('Token已失效,请重新登陆', {
confirmButtonText: '确定',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
location.reload()
})
})
}
return Promise.reject(new Error(res.message || '请求失败'))
} else {
return res
}
}
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。