approuter 로그인 여부에 따라 다른 페이지 접속 막는법

문제점:

위와 같이 로그인이 되어 있지 않음에도 /home 그러니깐 피드페이지(메인페이지)에 접근이 가능한 이슈가 있었습니다. 

 

들숨날숨 프로젝트는 로그인을 하면 localstorage에 로그인 정보를 담아 놓고 사용함으로서 사용자가 사용하기 편하도록 설계하였습니다(로그인을 여러번 하지 않도록).

 

그러다 보니 로그인을 하지 않은 상태에서 로그인을 해야만 접근을 할 수 있는 페이지에도 접속이 가능했습니다.

 

해결 방법:

localstorage에 값이 있으면 로그인이 되어 있다는 뜻임으로 localstorage에서 값을 받아온 뒤 값의 여부에 따라 다른 페이지로 이동하도록 코드를 적성해 주면 됩니다.

const isAuthenticated = () => {

const token = localStorage.getItem('token');

return !!token;

};

const PrivateRoute = ({ element: Element }) => {

return isAuthenticated() ? <Element /> : <Navigate to="/login" />;

};

로컬 스토리지에서 값을 받아온뒤 값이 없을 경우에는 loginPage로 이동하도록 만든 코드 입니다.

 

<Route path="/home" element={<PrivateRoute element={<FeedPage />} />} />

사용은 이런 식으로 하시면 됩니다.