Axios實體在第一次呼叫時沒有從本地存盤中獲取令牌-Reactjs django

我創建了一個 Axios 實體來設定 baseURL 和標頭。標頭還需要包含用于授權的令牌。因此，當用戶登錄時，我呼叫 API 以使用 useEffect 獲取與用戶相關的一些資料。因此，登錄完成后立即呼叫 API。此 API 需要權限，因此需要令牌。登錄時，我將令牌存盤在本地存盤中，但由于某種原因，在第一次呼叫實體時未加載令牌，并且我從后端收到未經授權的錯誤。但是，如果我手動重新加載頁面，API 會再次被呼叫，但這次實體接收到令牌并獲取資料。下面是我的代碼。

axios 實體

const baseURL = "http://127.0.0.1:8000";

// getting the token from the localstorage
let authTokens = localStorage.getItem("token")
  ? JSON.parse(localStorage.getItem("token"))
  : null;

const axiosInstance = axios.create({
  baseURL,
  headers: { Authorization: `Bearer ${authTokens?.access}` },
});

api呼叫

export const fetchTeacherDetail = async () => {
 
  try {
    let response = await axiosInstance.get(`/teacher/get-detail/`);
    return response;
  } catch (error) {
    ToastNotification(
      "We are facing some errors. Please trying again later.",
      "error"
    );
  }
};

我關注了一個 youtube 視頻來了解這一點，他沒有收到此錯誤，但由于某種原因，我收到了此錯誤。請向我建議我該怎么做。

更新

顯示我在本地存盤中存盤令牌的位置的代碼

在 redux 中存盤令牌和用戶詳細資訊的操作

export const loginUser = (email, password) => async (dispatch) => {
  try {
    // before calling the api
    dispatch(loginPending());

    //calling the api
    const response = await userLogin(email, password);
    if (response.status !== 200) {
      return dispatch(loginFail(response.status));
    } else {
      dispatch(loginSuccess(response.data));
    }
  } catch (error) {
    dispatch(loginFail(error.message));
  }
};

userLogin() API 代碼

export const userLogin = async (email, password) => {
  const config = {
    headers: {
      "Content-Type": "application/json",
    },
  };

  const body = JSON.stringify({ email, password });

  try {
    const response = await axios.post(`${url}/token/`, body, config);
    if (response.status === 200) {
      localStorage.setItem("token", JSON.stringify(response.data));
      return response;
    }
  } catch (error) {
    ToastNotification("Credentials provided are not valid", "error");
  }
};

在上述函式中收到的 response.data 的模擬值

 refresh: 'eyJ0eXAiOiJKV1QUzI1NiJ9.eyJ0b2tlbl90eXBlIjoicmVmcmVzaCIsImV4cCI6MTY1ODU4NTUxMSwiaWF0IjoxNjUwODA5NTExLCJqdGkiOiI4NDRjZWFjNTFkOWI0OGNkOWE0MTFlYzU4ZWY4ZDMxYiIsInVzZXJfaWQiOiI0YjdhODEzYmFkYi05VzZXIiOmZhbHNlLCJpc19zdGFmZiI6ZmFsc2V9.zlGb4tPtJ9HlUvSUZW6QrHHfDsUU8hZ6rliYc3RbJXQ',
access: 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjU4NTg1NTExLCJpYXQiOjEk1MTEsImp0aSI6ImEyYzg1NzAyZmY0ZjQ4YmRiZjEwZjEzNTUwYjk0MzE2IiwidXNlcl9pZCI6lciI6dHJ1Zsc2UsImlzX3N1cGVydXNlciI6ZmFsc2UsImlzX3N0YWZmIjpmYWxzZX0.qrictVbES22dGpA0dpVA5KLTZkrMsCM0hDHq2Yrs

uj5u.com熱心網友回復：

您的問題可能是因為您在應用程式啟動時設定了 axios 實體令牌，但在登錄時從未更新它。

當登錄發生時，您需要通過再次檢查 localStorage 資料來“重繪 ”該值。

一個快速的解決方案是每次呼叫 API 時計算標頭

const baseURL = "http://127.0.0.1:8000";

export const getToken = () => localStorage.getItem("token")
  ? JSON.parse(localStorage.getItem("token"))
  : null;

export const getAuthorizationHeader = () => `Bearer ${getToken()}`;

export const axiosInstance = axios.create({
  baseURL,
  headers: { Authorization: getAuthorizationHeader() },
});

然后在 API 呼叫中

export const fetchSomething = async () => {
  try {
    const response = await axiosInstance.get("/foo", { 
      headers: { Authorization: getAuthorizationHeader() }
    });

    return response;

  } catch (error) {
    // error handling
  }
};

另一種解決方案是在登錄發生時通過執行類似這樣的操作來改變 axios 實體

axiosInstance.defaults.headers.Authorization = `Bearer ${result.access}`

uj5u.com熱心網友回復：

我確實相信問題不在后端，因為您需要手動重繪 以使授權正常，因此無需擔心后端您的問題是您將令牌的值存盤在其中const getToken ，它將永遠存盤在那里，什么我的意思是，如果它在開始時將其作為壞令牌或 null 獲取，它將始終是相同的初始值，所以你必須做的是：

const baseURL = "http://127.0.0.1:8000";

const axiosInstance = axios.create({
  baseURL,
  headers: { Authorization: `Bearer ${localStorage.getItem("token")?.access}` },
});

標籤：javascript 反应 axios

上一篇：將引數傳遞給路由

下一篇：nodeJS如何與VueJs通信（appwriteSDKQuestion）