<p>로그인 성공 후 사용자를 홈페이지로 리디렉션하고 싶고 사용자 로그인 API 요청 데이터를 currentUser라는 변수에 저장하므로 currentUser가 true인 경우 홈페이지로 리디렉션해야 합니다.
로그인 요청을 처리하는 방법은 다음과 같습니다. </p>
<pre class="brush:php;toolbar:false;">export const AuthContextProvider = ({ 하위 }) =>
const [currentUser, setCurrentUser] = useState(
JSON.parse(localStorage.getItem("사용자")) ||
);
const 로그인 = 비동기(입력) =>
const res= axios.post("https://micacarballo-social-media-api.onrender.com/api/v1/auth/login",inputs,{
})
setCurrentUser(res.data)
};
useEffect(() => {
localStorage.setItem("사용자", JSON.stringify(currentUser));
}, [현재사용자,로그인]);
const updateUser = 비동기 () =>{
const user = JSON.parse(localStorage.getItem("사용자"))
const res= axios.get("https://micacarballo-social-media-api.onrender.com/api/v1/users/me/",{
헤더: {
승인: `jwt ${user.token}`
}
})
setCurrentUser(res.data)
}
반품 (
<AuthContext.Provider 값={{ currentUser, login, updateUser}}>
{어린이들}
</AuthContext.Provider>
);
};</pre>
<p>내 보호 경로:</p>
<pre class="brush:php;toolbar:false;">'./context/authContext'에서 { AuthContext } 가져오기
함수 앱() {
const { currentUser } = useContext(AuthContext);
const 레이아웃 = ()=>{
반품(
<div>
<나브바 />
<div style={{ 디스플레이: "flex" }}>
<왼쪽바 />
<div 스타일={{ flex: 6 }}>
<아울렛/>
</div>
</div>
</div>
)
}
const ProtectedRoute = ({어린이}) =>{
if(!현재사용자){
return <다음으로 이동="/login" />
}자식을 돌려보내다
}
const 라우터 = createBrowserRouter([
{
경로: "/",
요소: (
<보호된 경로>
<레이아웃/>
</보호된 경로>
),
어린이들 :[
{
경로:"/",
요소: <홈 />
},{
경로:"/profile/:id",
요소:<프로필 />
}
]
}, {
경로: "/로그인",
요소: <로그인 />,
},
{
경로: "/등록",
요소: <등록 />
},
]);
반품 (
<div className="앱">
<RouterProvider 라우터={라우터} />
</div>
)
}
기본 앱 내보내기</pre>
<p>내가 좋아하는 화면:</p>
<pre class="brush:php;toolbar:false;">const 로그인 = () => {
const [입력, setInputs] = useState({
이메일: "",
비밀번호: "",
});
const [err, setErr] = useState(null);
const [isLoading, setIsLoading] = useState(false); // 스피너 로딩을 위한 상태 변수
const 탐색 = useNavigate()
const handlerChange = (e) => {
setInputs((prev) => ({ ...prev, [e.target.name]: e.target.value }));
};
const {login} = useContext(AuthContext)
const handlerLogin = async (e) => {
e.preventDefault();
노력하다 {
setIsLoading(true); // 로딩을 true로 설정
로그인(입력)을 기다립니다;
탐색("/")
} 잡기 (오류) {
setErr(err.response.data);
}마지막으로 {
setIsLoading(false); // 로딩을 다시 false로 설정
}
};
반품 (
<div className='login'>
<div className="카드">
<div className="왼쪽">
<h1>소셜마이카</h1>
<p>
친구들과 쉽고 재미있게 소통해보세요
</p>
<span>아직 계정이 없으신가요?</span>
<링크="/등록">
<button>등록</button>
</링크>
</div>
<div className="오른쪽">
로그인
<양식 작업="">
<입력 유형="이메일" 자리 표시자='이메일' 이름='이메일' onChange={handleChange}></input>
<입력 유형="password"placeholder='password' name='password' onChange={handleChange}/>
{오류 &"잘못된 이메일 또는 비밀번호"}
<button onClick={handleLogin}enabled={isLoading}> {isLoading ? <로그인/>
</양식>
</div>
</div>
</div>
}
기본 로그인 내보내기</pre>
<p>사용자가 로그인하고 currentUser에 데이터가 저장된 후에 이것이 작동하지 않는 이유를 이해할 수 없습니다. 리디렉션 없이 로그인 페이지가 새로 고쳐지고 홈 페이지에 수동으로 액세스해야 합니다.
로그인 페이지의 handlerSubmit 함수에서 탐색을 ("/register")로 변경해 보았지만 제대로 작동하지만 Navigate('/')</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
경로를 바꾸세요
으아악/home不仅仅是/마치잘 작동할 거예요