選擇適當的應用程式架構來處理不記名令牌

Question

我想使用使用 OAuth 2.0 的 API

簡而言之，我需要取得一個存取令牌，我必須將其包含在每個後續請求中，以便伺服器可以確認我的身分。

在應用程式中執行此操作的架構會是什麼樣子？有人可以推薦一篇文章嗎？

目前，我在每個請求上從 API 取得新令牌以執行請求的效率很低。

是否存在保存不記名令牌並重複使用直至其過期的最佳實踐？

我想在我的應用程式中使用 Vue.js。

Answer 1

正如您所說，在每個請求上請求新令牌是沒有意義的。

登入後，最好的方法是將傳回的令牌儲存在 localStorage 中，因此無論使用者是否刷新瀏覽器，應用程式都會從儲存中取得 Bearer。

完成此操作後，您應該在每個 axios 請求中附加目前有效的 Bearer 令牌。 IE：

axios.defaults.headers = {
    common: {
        'X-Requested-With': 'XMLHttpRequest',
        'Access-Control-Allow-Origin': '*',
        'Authorization': 'Bearer ajsyHjdjkakl;ds......'
    }
}

僅供參考，有很多軟體包可以幫助您處理此問題，否則，請準備好面對一些令人頭痛的問題。我個人從很久以前就開始使用這個：https://websanova.com/docs/vue-auth /首頁