chatGPT?deBug解決管理員登入服務器返回401問題
問題復現：
連接錢包后，會調用函數，彈出窗口讓用戶簽名
if (signatureMessage) {
await signMessageAsync({
message: signatureMessage,
});
dispatch(changeHasLoggedToTrue());
}
有了簽名后，會調用signIn來設置本地存儲
signIn函數
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列表
后端接口也限制了，不是管理員拿不到數據，而我明明用管理員登入了，還是拿不到，刷新才拿得到數據。不刷新的時候控制臺報401，Unauthorized，沒有權限。
解決過程
于是問了gpt
gpt給了5種可能的原因
關鍵是第一條 問題定位到了沒有accessToken 但是我一看控制臺Application里面 access token沒錯，是有的，但是數據要刷新頁面才出來，于是我繼續(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: 翻譯:刷新后才出現數據，可能是因為在發(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ā)送請求才拿到數據
2.如果accessToken過期了，請求不到數據，需求是要清除本地緩存并退出錢包登錄
第2條是新增的需求，如何判斷accessToken過期，GPT說如果accessToken過期，服務器會返回401，所以這里if判斷服務器會返回401后的邏輯不能是重新發(fā)送請求。首先要解決第一個問題。為何每次請求都返回401？
打log，發(fā)現在連接錢包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;之后管理員連接錢包，就能拿到數據了，因為發(fā)送請求的時候 header里面有了Authorization，即有了accessToken
以上就是chatGPT deBug解決管理員登入，服務器返回401,沒有拿到數據的詳細內容，更多關于chatGPT deBug解決管理員登入，服務器返回401,沒有拿到數據的資料請關注腳本之家其它相關文章！
相關文章
整理的比較全的一句話后門代碼(方面大家查找后門)，很多情況下也會有一些特殊字符的表示，原理一樣。2010-09-09
這篇文章主要為大家介紹了git基礎之各版本控制系統(tǒng)以及版本的演變，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-04-04
當某個用戶發(fā)出一個邀請后，另一個用戶通過這個鏈接進行網站后，為發(fā)這個鏈接的用戶加10個積分。2011-09-09
這篇文章介紹了Ubuntu中安裝vscode與官方插件的方法，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-06-06
在項目開發(fā)過程中使用Git的方式有三種工作方式，分別是集中式工作流，Git Flow工作流，Forking 工作流。下面主要針對Git工作流進行講解2022-04-04
這篇文章主要介紹了chatGPT本地部署、運行和接口調用的詳細步驟,文中給大家介紹了cookie?信息寫入?config.json的三種方式，每種方式給大家介紹的非常詳細，需要的朋友可以參考下2023-02-02
本文主要介紹了Vscode的SSH插件遠程連接Linux的實現步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-04-04
JWT(json web token)是為了在網絡應用環(huán)境間傳遞聲明而執(zhí)行的一種基于JSON的開放標準。下面這篇文章主要給大家介紹了關于基于Token的身份驗證之JWT的基礎相關資料，文中通過示例代碼的非常詳細，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了VScode中配置使用fortran的方法,本文通過圖文實例代碼相結合給大家介紹的非常詳細，需要的朋友可以參考下2021-07-07
本地化部署 DeepSeek 全攻略(linux、windows、mac系統(tǒng)部署)
本文詳細介紹了在Linux、Windows和Mac系統(tǒng)上本地部署DeepSeek模型的步驟,包括硬件要求、軟件環(huán)境、模型下載和部署步驟、以及優(yōu)化與注意事項,感興趣的朋友一起看看吧2025-02-02