chatGPT?deBug解決管理員登入服務器返回401問題

更新時間：2023年05月06日 14:25:56 作者：boombb

這篇文章主要介紹了chatGPT?deBug解決管理員登入，服務器返回401,沒有拿到數(shù)據(jù)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

問題復現(xiàn)：

連接錢包后，會調用函數(shù)，彈出窗口讓用戶簽名

   if (signatureMessage) {
        await signMessageAsync({
          message: signatureMessage,
        });
        dispatch(changeHasLoggedToTrue());
      }

有了簽名后，會調用signIn來設置本地存儲

signIn函數(shù)

  const signIn = async (signature) => {
    try {
      const signinRes = await API.post(`/auth/signin`, {
        address: address,
        signature: signature,
      });
      const accessToken = signinRes.data?.data?.access_token;
      setLocalStorage("accessToken", accessToken);//設置本地存儲
      refreshAPIToken();
      addressInfo.current.address = address;
    } catch (err) {
      console.log("signin");
      showMessage({
        type: "error",
        title: "Failed to sign-in",
        body: err.message,
      });
      disconnect();
    }
  };

如果用戶連接了錢包就會調接口，獲取用戶是否是管理員通過RTK(redux toolkit)存儲在isAdmin變量里

 const res = await API.get(`/member/${address}`);
        if (!res.data.data) {
          dispatch(changeIsAdminToFalse());
          return;
        }
        if (res.data.data.role.includes("Member")) {
          dispatch(changeIsMemberToTrue());
        }

當isAdmin為true的時候,才顯示member列表

后端接口也限制了，不是管理員拿不到數(shù)據(jù)，而我明明用管理員登入了，還是拿不到，刷新才拿得到數(shù)據(jù)。不刷新的時候控制臺報401，Unauthorized，沒有權限。

解決過程

于是問了gpt

gpt給了5種可能的原因

關鍵是第一條問題定位到了沒有accessToken 但是我一看控制臺Application里面 access token沒錯，是有的，但是數(shù)據(jù)要刷新頁面才出來，于是我繼續(xù)問

我：the access token is right , we can get the requested source by this token after refresh. But how to get the requested source without refresh

GPT：If you're able to access the resource after refreshing the page, it's possible that the access token is not being sent with subsequent requests after the initial connection is made.

To ensure that the access token is being sent with all subsequent requests, you can set the token in the headers of the Axios instance. Here's an example of how to do this: 翻譯:刷新后才出現(xiàn)數(shù)據(jù)，可能是因為在發(fā)送請求的時候access token沒有被發(fā)送，為了確保所有的請求都帶有access token 需要給axios實例設置header

import axios from 'axios';
const API = axios.create({
  baseURL: 'https://example.com/api',
  headers: {
    Authorization: `Bearer ${getLocalStorage('accessToken')}`,
  },
});
API.interceptors.response.use(
  response => response,
  async error => {
    const originalRequest = error.config;
    if (error.response.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;
      const accessToken = await handleRefreshToken();
      API.defaults.headers.common.Authorization = `Bearer ${accessToken}`;
      return API(originalRequest);
    }
    return Promise.reject(error);
  },
);

GPT給了一段代碼我自己再看邏輯修改關鍵就是當服務器返回401的時候，要給axios請求設置accessToken,再次發(fā)送請求；

漏洞

1.每次請求剛開始都返回401，request攔截之后，再次發(fā)送請求才拿到數(shù)據(jù)

2.如果accessToken過期了，請求不到數(shù)據(jù)，需求是要清除本地緩存并退出錢包登錄

第2條是新增的需求，如何判斷accessToken過期，GPT說如果accessToken過期，服務器會返回401，所以這里if判斷服務器會返回401后的邏輯不能是重新發(fā)送請求。首先要解決第一個問題。為何每次請求都返回401？

打log，發(fā)現(xiàn)在連接錢包set token，token有值之前，就發(fā)送請求，所以要在連接錢包set token，確保token有值之后才發(fā)送請求,之前是判斷為管理員就發(fā)送請求，這個在需求層面來將沒錯，但是connect wallet 設置isAdmin為true的時候還沒有set token 所以在 set token之后新增 dispatch(changeSigninToTrue()); useEffect監(jiān)聽hasSiginin：

  useEffect(() => {
    if (hasSiginin) {
      console.log("有發(fā)送請求");
      searchList();
    }
  }, []);

最終代碼

import axios from "axios";
import { getLocalStorage, removeLocalStorage } from "@/src/utils/utility";
import { useLogout } from "../src/hooks/useLogout";
const API = axios.create({
  baseURL: process.env.NEXT_PUBLIC_FRENART_BACKEND_API,
});
API.interceptors.request.use(
  (config) => {
    const accessToken = refreshAPIToken();
    if (accessToken) {
      config.headers.Authorization = `Bearer ${accessToken}`; //accessToken
    }
    return config;
  },
  (error) => Promise.reject(error)
);
function handleUnauthorizedError() {
  const logout = useLogout();
  logout();
}
API.interceptors.response.use(
  (response) => response,
  async (error) => {
    const accessToken = refreshAPIToken();
    error.config.headers.Authorization = `Bearer ${accessToken}`;
    const originalRequest = error.config;
    if (error.response?.status === 401 && !originalRequest._retry) {
      console.log("401");
      handleUnauthorizedError();
    }
    return Promise.reject(error);
  }
);
function refreshAPIToken() {
  const accessToken = getLocalStorage("accessToken");
  API.defaults.headers.common.Authorization = `Bearer ${accessToken}`;
  return accessToken;
}
export { refreshAPIToken };
export default API;

之后管理員連接錢包，就能拿到數(shù)據(jù)了，因為發(fā)送請求的時候 header里面有了Authorization，即有了accessToken

以上就是chatGPT deBug解決管理員登入，服務器返回401,沒有拿到數(shù)據(jù)的詳細內容，更多關于chatGPT deBug解決管理員登入，服務器返回401,沒有拿到數(shù)據(jù)的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: