在實際開發中前端登錄成功我們將服務器返回的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實例，可替換