如何使用vue和laravel自动将承载令牌获取到axios头视图

Question

我正在尝试获取当前用户的令牌以获取像这样的数据:

async getUser() {
const config = {
headers: {
'Accept': 'application/json',
'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJ...'
}
}
await this.axios
.get("/api/auth/testapi", config)
.then((response) => {
this.user = response.data;
})
.catch((error) => {
console.log(error);
this.user = [];
});
},

我怎么能设置"授权"头自动获得认证用户的当前令牌?

我尝试了本地存储，如下所示:

async getUser() {
const token = localStorage.getItem('access_token');
const config = {
headers: {
'Accept': 'application/json',
'Authorization': `Bearer ${token}`
}
}
await this.axios
.get("/api/auth/testapi", config)
.then((response) => {
this.user = response.data;
})
.catch((error) => {
console.log(error);
this.user = [];
});
},

，但效果不佳。

有什么问题吗?

更新:

---

app.js:

require("./src/main.js");
import VueAxios from "vue-axios";
import axios from "axios";
Vue.use(VueAxios, axios);

if (localStorage.has("access_token")) {
axios.defaults.headers.common["Authorization"] =
"Bearer " + localStorage.getItem("access_token");
}
loginSuccess(accessToken) {
localStorage.setItem('access_token', accessToken);
window.location.href = '/home';
}

"if"后面有问题

结束

';' expected.

Answer 1

我会怎么做，

在每个请求上，在一个js文件(不是vue)上，比如你的bootstrap.js文件(因为它会更快被加载):

let access_token = localStorage.getItem('access_token');
if(access_token) {
axios.defaults.headers.common['Authorization'] = 'Bearer ' + access_token;
}

，当您登录用户并检索访问令牌时:

loginSuccess(accessToken) {
localStorage.setItem('access_token', accessToken);
window.location.href = '/home';
}

它会将用户重定向到您的主页或用户需要重定向到的任何页面，并且access_token将在localStorage上设置。

剩下的最后一位是在用户注销时删除localStorageaccess_token项，也许用拦截器捕获401，在令牌过期时删除access_token并重定向到/login。

window.axios.interceptors.response.use(function (response) {
return response;
}, function (error) {
if (401 === error.response.status) {
localStorage.removeItem('access_token');
window.location.href = '/login'
} else {
return Promise.reject(error);
}
});

如果您打算向非您的外部端点发出axios请求，您可能需要检查401的域以确保它是您的