<p>사용자로 로그인하려고 합니다. 자격 증명을 받는 로그인 구성 요소가 있고 redux 툴킷을 사용하여 상태와 유효성 검사를 저장하고 모든 작업은 userSlice에서 수행됩니다. 사용자가 로그인했는지 확인하고 사용자가 로그인하지 않은 경우 내가 가지고 있는 레시피 페이지로 이동해서는 안 되는 보호된 경로가 있습니다. useSelecter 후크를 사용하여 보호된 라우팅 구성 요소에서 사용자에 액세스하려고 하면 첫 번째 렌더링에서는 null이 반환되지만 두 번째 렌더링에서는 사용자가 반환되지만 로그인은 여전히 실패합니다. redux 개발 도구에서는 상태가 훌륭하게 업데이트됩니다. 보호된 라우팅 구성 요소의 첫 번째 렌더링에서 사용자 개체를 가져오는 방법이 있습니까? (보시다시피 저는 useEffect 후크를 사용하고 있으며 종속성 배열이 있습니다). </p>
<p>도움을 주셔서 진심으로 감사드립니다.
감사해요. </p>
<p>제 코드는 다음과 같습니다:</p>
<p>Login.js -- 이 파일은 자격 증명을 수신한 다음 useDispatch를 사용하여 작업을 전달하고 useDispatch를 사용하여 상태를 업데이트하는 역할을 합니다. </p>
<pre class="brush:php;toolbar:false;">'react'에서 React, { useState } 가져오기;
'../../features/users/userSlice'에서 { loginUser }를 가져옵니다.
'react-redux'에서 import { useSelector, useDispatch }
'react-router-dom'에서 import { useNavigate };
기본 함수 내보내기 Login() {
const [이메일, setEmail] = useState("");
const [password, setPassword] = useState("");
const 사용자 = useSelector(상태 => state.user.user)
const 디스패치 = useDispatch()
const 탐색 = useNavigate()
반품 (
<div>
<입력
유형="텍스트"
값={이메일}
onChange={(e) => setEmail(e.target.value)}
/>
<입력
유형="비밀번호"
값={비밀번호}
onChange={(e) => setPassword(e.target.value)}
/>
<버튼 유형="제출" onClick={() =>
파견(loginUser({이메일, 비밀번호}))
탐색('/레시피')
}}>제출</버튼>
</div>
)
}</pre>
<p>ProtectedRoute.js -- 이 구성요소는 사용자가 인증되지 않으면 로그인할 수 없도록 보장합니다</p>
<pre class="brush:php;toolbar:false;">import React, { useState, useEffect } from "react"
"react-router-dom"에서 import { Route, Navigate, Outlet };
'react-redux'에서 가져오기 { useSelector };
기본 함수 내보내기 ProtectedRoute({ children }) {
const [ activeUser, setActiveUser ] = useState(false)
const user = useSelector((state) => state.user);
useEffect(() => {
if (!user.isLoading) {
user.success ? setActiveUser(true) : setActiveUser(false)
console.log('활성 사용자: ' + activeUser)
}
}, [사용자])
반품 (
activeUser ? <아웃렛 /> : <다음으로 이동:="/login"/>
)
}</pre>
<p>app.js -- 이 구성 요소에는 보호된 경로를 포함한 모든 경로가 포함되어 있습니다. </p>
<pre class="brush:php;toolbar:false;">"react"에서 React 가져오기;;
"./comComponents/recipes/recipes"에서 레시피를 가져옵니다.
"./comComponents/users/Login"에서 로그인 가져오기;
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"
"./utils.js/ProtectedRoute"에서 ProtectedRoute를 가져옵니다;;
const 앱 = () =>
반품 (
<div>
<브라우저라우터>
<경로>
<경로 경로="/login" 인덱스 요소={
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
문제는 로그인 핸들러가 동시에 두 가지 작업을 실행한다는 것입니다.
으아악사용자가 인증하기 전에 보호된 경로로 이동하세요.
이 문제를 해결하려면 로그인 처리기가 인증 성공을 기다린 다음 필요한 경로로 리디렉션해야 합니다.
으아악자세한 내용은 썽크 결과 처리를 참조하세요.
추가로 다시 렌더링할 필요 없이
으아악ProtectedRoute로직을 단순화할 수도 있습니다. 렌더링할 올바른 출력을 얻으면 됩니다. 모든 경로 보호 상태는 선택된 redux 상태에서 파생될 수 있습니다.