질문&답변
인증 체크 부분 app..js 부분 질문이요
안녕하세요! 저도 마찬가지로 react-router-dom v6를 사용해서 꽤 문법이 많이 달라져서 많이 찾아보고 강의들었어요! 제 글 참고하시고 도움되시면 좋겠습니다. hoc/auth.js import React from "react" ; import { useDispatch } from "react-redux" ; import { authUser } from "../_actions/user_action" ; import { useNavigate } from "react-router-dom" ; export default function Auth ({ SpecificComponent , option , adminRoute = null }) { const dispatch = useDispatch (); const navigate = useNavigate (); dispatch ( authUser ()). then (( response ) => { if (! response . payload . isAuth ) { // 로그인 하지 않은 상태 if ( option ) { navigate ( "/login" ); } } else { // 로그인 한 상태 if ( adminRoute && ! response . payload . isAdmin ) { navigate ( "/" ); } else { if ( option === false ) { navigate ( "/" ); } } } }); return SpecificComponent /> ; } App.js import { BrowserRouter as Router , Routes , Route } from "react-router-dom" ; import LandingPage from "./components/views/LandingPage/LandingPage" ; import LoginPage from "./components/views/LoginPage/LoginPage" ; import RegisterPage from "./components/views/RegisterPage/RegisterPage" ; import Auth from "./hoc/auth" ; function App () { // Auth option // null -> 누구나 접근 가능 // true -> 로그인 한 유저만 접근 가능 // false -> 로그인 한 유저는 접근 불가능 return ( Router > Routes > Route path = "/" element = { Auth SpecificComponent = { LandingPage } option = {null} /> } /> Route path = "/login" element = { Auth SpecificComponent = { LoginPage } option = {false} /> } /> Route path = "/register" element = { Auth SpecificComponent = { RegisterPage } option = {false} /> } /> Routes > Router > ); } export default App ;
- 좋아요수
- 0
- 댓글수
- 2
- 조회수
- 377