[React] 로그인여부에 따라 Route 접근 설정하기

로그인 여부에 따라서 접속할 수 있는 페이지를 제한하는 방법에 대해서 포스팅해보려한다.

 

나 같은 경우에는 '/' 경로는 홈 페이지 여서 로그인을 해도, 안해도 접근이 가능해야했고

그 외에 나머지 페이지들은 isLogin 상태가 true 일 경우에만 접근가능하도록 구현하고 싶었다.

 

전체 코드부터 보자

...
import { userInfoState } from "./recoil/atoms/userState";
import { useRecoilState } from "recoil";

function App() {
    const [userInfo] = useRecoilState(userInfoState);
    const isLogin = userInfo.isLogin;
    return (
        <div className="App">
            <Routes>
                <Route path="/" element={<MainPage />}></Route>
                {isLogin ? (
                    <>
                        <Route
                            path="/recommend"
                            element={<RecommendPage />}
                        ></Route>
                        <Route
                            path="/recommendCompleted"
                            element={<CompletedPage />}
                        ></Route>
                        <Route path="/story" />
                        <Route path="/note" element={<NotePage />}></Route>
                        <Route path="/mypage" />
                    </>
                ) : null}
                <Route path="/kakaoLogin" element={<KakaoLogin />} />
                <Route path="*" element={<Navigate to="/" />} />
            </Routes>
        </div>
    );
}

export default App;

• isLogin 상태는 userInfoState 에 있는 값들 중 하나이다.
• isLogin 이 true 인 경우 나머지 route 들이 유효하도록하고, 만약 false 라면 null 로 보여지게 했다.
• 만약에 로그인을 안했는데 접근이 불가능한 페이지에 접속한 경우, 그냥 흰 페이지가 보여지게 하지말고 '/' 경로로 이동하도록 했다. 그 코드 내용은 다음과 같다

                <Route path="*" element={<Navigate to="/" />} />

• '/kakaoLogin' 은 카카오 로그인을 위한 redirect uri 이다. 로그인을 하지 않았어도 접근할 수 있어야한다.

privateRoute 와 publicRoute 를 따로 만들어서 구현하는 방법도 있는 것 같던데,

나는 이게 지금 프로젝트 코드 짜는데 있어선 제일 간단할 것 같아서 이렇게 구현했다.