我一直在嘗試構建此身份驗證驗證組件，但我被卡住了。
我要做的是向我的后端服務器發出 axios get 請求以驗證用戶是否已登錄。后端部分作業正常。請記住，cookie 是在它們存在時發送的。發生的情況是我將用戶的 cookie 和標頭與請求一起發送到后端，然后服務器對其進行驗證，然后發回成功回應。我正在嘗試根據 axios 回應更改 react useState 的狀態。
這是我當前的代碼：
import { useEffect, useState } from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import apiurl from '../axios'; // custom axios interceptor
const AuthVerifyFunction = () => {
const [isAuth, setIsAuth] = useState();
const config = {
headers: {
"Content-Type": "application/json",
"X-Requested-With": "XMLHttpRequest"
}
}
const verifyAuth = () => {
apiurl.get('/api/auth/verify', config)
.then(res => {
setIsAuth(res.data.success)
console.log(res)
console.log("isAuth:", isAuth);
})
.catch(err => {
console.log(err)
});
}
useEffect(() => {
verifyAuth();
}, []);
return (
<h1>{isAuth ? <Outlet /> : <Navigate to="/login" />}</h1>
)
}
export default AuthVerifyFunction;
這是我得到的成功回應：
{data: {…}, status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ?, …}
data: {success: true, authHeader: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZC…Tg4fQ.lX8piOnRb9-MQCS8mibMSmFfjBcCeTaC7sw-DgdwBl8'}
headers: {content-length: '230', content-type: 'application/json; charset=utf-8'}
request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: true, upload: XMLHttpRequestUpload, …}
status: 200
statusText: "OK"
[[Prototype]]: Object
我一直堅持的部分是我不知道如何在異步回應之前不重定向用戶，或者簡單地說，如果 response.data.success 為真，我只想顯示出口，如果它不是，然后將它們重定向到 /login。
如果還有其他更好的方法可以做到這一點，請告訴我。先感謝您。
uj5u.com熱心網友回復：
您可以使用isLoading狀態：將其設定為false當您收到來自 API 的回應時：
import { useEffect, useState } from 'react';
import { Navigate, Outlet } from 'react-router-dom';
import apiurl from '../axios'; // custom axios interceptor
const AuthVerifyFunction = () => {
const [isLoading, setIsLoading] = useState(true);
const [isAuth, setIsAuth] = useState();
const config = {
headers: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest',
},
};
const verifyAuth = () => {
apiurl
.get('/api/auth/verify', config)
.then((res) => {
setIsAuth(res.data.success);
setIsLoading(false);
console.log(res);
console.log('isAuth:', isAuth);
})
.catch((err) => {
console.log(err);
});
};
useEffect(() => {
verifyAuth();
}, []);
return (
<h1>
{isLoading ? (
'Authenticating...'
) : isAuth ? (
<Outlet />
) : (
<Navigate to='/login' />
)}
</h1>
);
};
export default AuthVerifyFunction;
uj5u.com熱心網友回復：
也許你應該宣告你的初始狀態，所以它不會為空
const [isAuth, setIsAuth] = useState(false);
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/450884.html