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实例，可替换