如何使用Node.js和jsonwebtoken後端實作Vue.js的授權認證？

Question

我正在學習 vuejs 和 nodejs 來為即將推出的學生專案設定身份驗證。

為此，我創建了一個 API，允許建立角色卡，點擊該卡可以查看角色的歷史記錄。

它工作得很好，所以我攻擊了身份驗證部分，我設法允許創建用戶並將最後一個與jsonwebtoken 連接，並且一切都在後端運行，但是當我在前端時，可以訪問字符當用戶連接時不起作用，並返回我編寫的錯誤（如果沒有任何作用）。我想指定，當我連接時，令牌已創建良好，因為後端使用用戶ID 很好地返回了它，但是當我到達字元頁面並查看請求的標頭時，我沒有看到「授權：持有者」令牌」。而且我不知道除了檢索字元列表之外，我是否應該在前端進行任何其他操作。

我想知道問題是否不是來自我下載的 npm“cors”套件並重寫了請求標頭的權限，但沒有任何效果。

我想指定我使用 axios 來取得我的字元清單。

我可以在登入請求中取得令牌，但我不知道如何使用它來允許使用者存取字元

這是登入工作並重定向到字元清單時出現的未經授權的錯誤：

這裡是來自後端的身份驗證中間件：

這是我使用身分驗證中間件的路線：

抱歉，如果我遺漏了一些關於如何在這裡寫一個好問題的內容，我不習慣 stackoverflow，所以如果我必須提供更多具體信息，請在評論中告訴我

感謝您的閱讀

Answer 1

您應該為每個需要身份驗證的請求設定授權標頭。

如果您對請求使用自訂 axios 實例，則可以使用攔截器指定授權標頭，例如：

axiosInstance.interceptors.request.use(config => {
  const token = /* your token */;
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }

  return config;
});

或者，如果您不使用這樣的實例，您可以將其設定為：

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;