H5W3
当前位置:H5W3 > JavaScript > Vue相关 > 正文

【Vue】axios 每次post、get请求都自动添加token?

store.js:

postAxios({commit}){
axios({
method:'get',
baseURL:'/api',
url:'/resume/app_chat_resume_index',
// headers:{'token':'abc'},
})
.then(function (rsp) {
let json = rsp.data.data;
commit('refreshData',json);
})
.catch(function (err) {
console.log('请求失败',err);
})
}

main.js里的拦截器:

axios.interceptors.request.use(
config => {
if (token) {
config.headers.Authorization = token;
}
return config
},
error => {
return Promise.reject(error)
}
);

我想在每次请求都自动添加一个headers,
不想每次都手动添加,
拦截器写出报错了:请求失败 ReferenceError: token is not defined
这个是怎么回事??小白一个。。。
大神们,帮忙看看>_<

回答

你的第二段代码,使用 if(token)这里没有定义token,所以会报错。

要想每次都把token添加到headers上,你写的位置是对的,在 request的拦截器中设置,你只需要在这里把你保存好的 token 的值取到,设置一下就好了。

示例如下:

axios.interceptors.request.use(
config => {
    // 这里写死一个token,你需要在这里取到你设置好的token的值
    const token = 'this is a token';
    if (token) {
        // 这里将token设置到headers中,header的key是Authorization,这个key值根据你的需要进行修改即可
        config.headers.Authorization = token;
    }
    return config
},
error => {
    return Promise.reject(error)
});
axios.interceptors.request.use(
config => {
    if (token) {
        config.headers.Authorization = token;
    }
    return config
},
error => {
    return Promise.reject(error)
}
);

你判断条件里面的token在哪定义的?还没定义就使用了?

本文地址:H5W3 » 【Vue】axios 每次post、get请求都自动添加token?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址