[英]bearer token undefined with global axios config
我使用 Axios 创建了一个 Vue 应用程序。 我通过 Vue UI 依赖安装安装了 Axios。 在我的main.js文件中,我添加了一个全局配置
import Vue from "vue";
import "./plugins/vuetify";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import axios from "axios";
Vue.config.productionTip = false;
axios.defaults.baseURL = "http://localhost:3000";
axios.defaults.headers.common["Authorization"] = `Bearer ${localStorage.token}`;
axios.defaults.headers.post["Content-Type"] = "application/json";
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
当我想signOut
我执行此操作
signOut: async function() {
try {
const response = await axios.post("/users/signout");
// go on
} catch (err) {
// err handling
}
}
但帖子标头返回一个未定义的令牌Bearer undefined
。 所以我删除了这一行
axios.defaults.headers.common["Authorization"] = `Bearer ${localStorage.token}`;
来自main.js文件并使用此代码
signOut: async function() {
try {
const request = axios.create({
baseURL: "http://localhost:3000/users/signout"
});
request.defaults.headers.common['Authorization'] = `Bearer ${localStorage.token}`;
const response = await request.post();
// go on
} catch (err) {
// err handling
}
}
这很好用。 Authorization
标头设置正确。 为什么现在有效? 我该如何解决第一种方法?
由于您在main.js
中设置授权标头,它将在应用程序启动时执行一次。 如果在您的localStorage
该令牌不存在,它将是undefined
并且将保持这种状态,直到请求拥有它自己的令牌。 现在,在第二种方法中,您的令牌存在于localStorage
,因此它将正确设置标头。
在您的第一种方法中,您可以通过删除该Authorization
标头分配并直接在您的请求中分配令牌来解决此问题,或者创建一个函数,该函数将在服务器中的令牌发生更改(或被删除)时分配默认标头身份验证。
axios.interceptors.request.use(
config => {
const token = localStorage.getItem('token');
const auth = token ? `Bearer ${token}` : '';
config.headers.common['Authorization'] = auth;
return config;
},
error => Promise.reject(error),
);
这样,在每个请求之前,我们的令牌将从 localStorage 中重新读取,并且更新后的 Bearer 令牌将在标头中设置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.