关于Axios的封装中获取localstorage缓存的token不更新的问题

来自 https://www.h5w3.com/144598.html 侵删

vue项目中使用axios作为ajax请求插件，由于异步的原因，项目初始化之后axios获取的localstorage中缓存的token，在无刷新的情况下，localstorage缓存的token并不会被axios检测到更新，解决方案如下：
1、在获取到token的时候就设置axios header中的认证信息

 

 

  // 设置token信息并缓存

 

setToken (state, data) {

state.token = data

store.set('token', data)

// 设置axios header认证信息

axios.defaults.headers.token = data

}

 

 

2、在axios封装中获取localstorage缓存的token

 

 

// 设置认证信息

 

axios.defaults.headers.token = store.get('token')

 

//-----------------------------------

//token刷新实时获取新token
axios.defaults.headers['author-token-key'] = localStorage.getItem('token')

 

//------------或者调用的时候 

async _getToken() {
      await getToken(this.parmasList).then((res) => {
        if (res.data.code == 200) {
          //存储token 替换原有token,原来token备份
          localStorage.setItem("tokenBack", localStorage.getItem("token"));
          localStorage.setItem("token", res.data.data);
        }
      });
    },

 

//-----------------------

方法放到里面

getToken(this.parmasList)
        .then((res) => {
          if (res.data.code == 200) {
            //存储token 替换原有token,原来token备份
            localStorage.setItem("tokenBack", localStorage.getItem("token"));
            localStorage.setItem("token", res.data.data);
            this.$router.push({
              path: "/home",
              query: {
                type: type,
              },
            });
          }
        })
        .finally(() => {
          this.$router.push({
            path: "/home",
            query: {
              type: type,
            },
          });
        });