首頁  >  問答  >  主體

如何使用 vue 和 laravel 自動將 Bearer 令牌取得到檢視中的 axios 標頭

我正在嘗試獲取當前用戶的令牌來檢索數據,如下所示:

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粉459440991P粉459440991301 天前499

全部回覆(1)我來回復

  • P粉579008412

    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 的網域以確保它是您的網域

    回覆
    0
  • 取消回覆