vue 请求拦截request将token添加到请求头headers

在实际开发中前端登录成功我们将服务器返回的Token保存到Cookie中，为后续与服务器交互做验证！但有时后端没有做相关的逻辑编写无法从Cookie中取到Token,这时前端就需要在request请求拦截中！！！首先先我们需要在登...

在实际开发中前端登录成功我们将服务器返回的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实例，可替换