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实例,可替换
上一篇:关于localStorage的监听 和 WebSocket


下一篇:Vue 在进入某个路由之前刷新页面