【vue,axios请求携带token同步问题】

首先介绍一下个人才踩坑场景

在做项目的时候，避免不了使用到token的权限，之前在公司项目的开发中，都是公司框架成型的，阿钧在最近自接的项目中从头到尾的进行框架搭建时，发现本人在进行登录的时候，对后台返回数据携带的token进行本地存储，然后再进入首页后token并未在请求中携带，只有手动刷新一遍页面才会更新，鉴于这一问题来进行记录

最初代码

login.vue。

// 登录 
    async login() {
      const { data } = await adminLogin(this.form)
      if (data.code === 200) {
        localStorage.setItem("token",data.data.authorisation); //将token值存入本地
        message("登录成功", 'success', 1500)
        this.$nextTick(()=>{
          this.$router.push({name:'user'})
        })
      }
    }

axios.js

let token = JSON.parse(window.localStorage.getItem('token')) //获取本地储存token
const http = axios.create({
    timeout: 1000 * 86400,
    withCredentials: true,
    // baseURL: '',
    headers: {
        'Content-Type': 'application/json; charset=utf-8',
        'authorisation': token ? token : ""
    }
})

最后导致的结果就是再登录执行完毕之后，进入首页，下一次请求依旧不会携带token，因为axios.create只会再网页打开时执行一次，其他情况下不回执行，这时候我们只需要再请求拦截器里面加入"config.headers[‘authorisation’] = xxx"便可以在每一次请求时都能同步更新token数据，代码如下。

// 请求拦截
http.interceptors.request.use(config => {
    config.headers['authorisation'] = localStorage.getItem('token') // 请求头带上token
    return config
}, error => {
    return Promise.reject(error)
})