全局配置axios刷新页面后传后台没有token

全局配置的 axios，请求拦截处获取 token 并传到后台。刷新页面后第一次请求可以获取到 token，但是没传。不知道为什么，第二次请求就可以了。复现只出现在刷新后请求第一次不传 token。代码如下：

// http请求拦截器
axios.interceptors.request.use(config => {
let token = window.localStorage.getItem('token');
!!token ? axios.defaults.headers.common['token'] = token : '';
alert(axios.defaults.headers.common['token'])
removePending(config); //在一个axios发送前执行一下取消操作
config.cancelToken = new cancelToken((c)=>{
// 这里的axios标识我是用请求地址&请求方式拼接的字符串
pending.push({ u: config.url + JSON.stringify(config.data) +'&' + config.method, f: c });
});
return Promise.resolve(config)
}, error => {
return Promise.reject(error)
})

刷新页面，点击按钮执行 axios 请求时候 可以弹出 token（弹窗：上面第五行），但是查看 network中 token 没有传过去

回答

如果我理解的没错的化，你只是要每个 axios 请求都携带 token，没太理解你的代码为什么写的这么复杂，给你一段我写过的代码：

axios.interceptors.request.use(
    config => {
        let token = localStorage.getItem('token')
        if (token && token != '') {
            config.headers.token = token;
        }
        return config;
    },
    error => {
        return Promise.reject(error);
    });

这句

axios.defaults.headers.common['token'] = token

通常是在拦截器外面用的，既然都在拦截器里面了，直接修改 config 就好了。

而且直接返回 config 就好了，起码官方的代码是这么写的。

你应该想清楚该怎么做，而不是随便想个做法，然后一定要把它实现。

对于你这样的需求，最合适的做法是程序初始化时，从 localStorage 里取出 token，然后用 axios.defaults.headers.common['token'] = token 把值赋进去。类似的地方还有登录成功。

以上是 全局配置axios刷新页面后传后台没有token 的全部内容， 来源链接： utcz.com/a/19948.html

回到顶部