如何使用授權承載 + 令牌使用 Axios 注銷用戶

Question

我有一個應用程序，我通過連接到后端（使用 axios）並獲取存儲在 localStorage 中的 JWT 令牌來登錄用戶。 我的問題來自注銷功能。 我目前這樣做：

async endAuth(context) {
    try {
      await axios.post("auth/logout", {
        headers: {
         Authorization:
            "Bearer " + JSON.parse(localStorage.getItem("currentUser")).token,
        },
      });
      localStorage.clear();
      context.commit("setUser", {
        token: null,
        userId: null,
      });
    } catch (e) {
      const error = new Error("Something went wrong");
      throw error;
    }
}

這不起作用。 與 API 的連接已建立，但我從后端收到 401 錯誤， {success: false, message: 'Expired or Invalid Token'}

現在我嘗試將"Content-Type": "application/json",到標題中仍然沒有運氣。

我還更改了我的代碼以在fetch() API 中使用 JavaScript 構建。 這有效！ 這是代碼：

async endAuth(context) {
  let url = baseURL + "/auth/logout";
  const response = await fetch(url, {
      method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization:
        "Bearer " + JSON.parse(localStorage.getItem("currentUser")).token,
    },
    });
    const responseData = await response.json();
    if (!response.ok) {
      const error = new Error(
        responseData.message || "Failed to authenticate. Check your login data."
      );
      throw error;
    } else {
      localStorage.clear();
      context.commit("setUser", {
        token: null,
        userId: null,
      });
    }
}

我還嘗試通過axios.defaults.headers.common["Authorization"] = "Bearer " + localStorage.getItem("currentUser").token;設置 axios 標頭axios.defaults.headers.common["Authorization"] = "Bearer " + localStorage.getItem("currentUser").token; - 不走運 我是否在 axios 請求中遺漏了什么？

Answer 1

一般的簡短解決方案：

// previus logout
this.$axios.setHeader('Authorization', `Bearer ${localStorage.getItem("token")}`);
// after logout
this.$axios.setHeader('Authorization', null)
  

具體長解（問題）：

 async endAuth(context) {
        try {
          this.$axios.setHeader('Authorization', `Bearer ${JSON.parse(localStorage.getItem("currentUser")).token}`);
          await axios.post("auth/logout");
          localStorage.clear();
          context.commit("setUser", {
            token: null,
            userId: null,
          });
          this.$axios.setHeader('Authorization', null)
        } catch (e) {
          const error = new Error("Something went wrong");
          throw error;
        }
    }

這只是用nuxt發生在我身上，我希望其他人有用