我正在嘗試獲取當前用戶的令牌來檢索數據,如下所示:
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.
P粉5790084122024-01-17 10:32:56
我會做什麼,
在每個請求上,在 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 上設定。
剩下的最後一點是在使用者登出時刪除 localStorage access_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 的網域以確保它是您的網域