vue 请求拦截request将token添加到请求头headers
在实际开发中前端登录成功我们将服务器返回的Token保存到Cookie中，为后续与服务器交互做验证！但有时后端没有做相关的逻辑编写无法从Cookie中取到Token,这时前端就需要在request请求拦截中！！！
首先先我们需要在登录接口成功后将返回的Token保存在localStorage、sessionStorage中我这边是保存在localStorage。同时我我在Cookie进行了Token保存!请看代码
handleLogin() {
this.$refs.loginFormRef.validate(async valid => {
// console.log(valid);
if (!valid) return
const res = await api.login(this.form)
if (res.code === '0000') {
window.localStorage.setItem('userName', this.form.username)
window.localStorage.setItem('access_token', res.data.access_token)
document.cookie = 'access_token=' + res.data.access_token
setTimeout(() => {
this.$router.push({
path: `/view/Home`
})
}, 500)
} else {
return this.$message.error(res.msg)
}
})
}
validate为el-form表单验证
完成第一步我们就要在request请求拦截中为请求头添加Token
//请求拦截
api.interceptors.request.use(
req => {
// 在发送请求前要做的事儿
req.headers.access_token = localStorage.getItem('access_token')
return req
},
err => {
// 在请求错误时要做的事儿
// 该返回的数据则是axios.catch(err)中接收的数据
return Promise.reject(err)
}
)
api 是我创建的axios实例，可替换