접근 제한 라우팅(Access Control & Authentication)

프론트에서 유저가 로그인 됐는지 확인하려면? 그리고 그에 따른 라우팅은?

• 라우팅 전 프론트에서는 사용자의 쿠키나 Storage를 조회하여 토큰이 있는지 검사한다.
• 그리고 그에 따라 유저에게 다른 페이지를 보여준다.
• 이걸 제한 접근 라우팅이라 한다.

로그인여부에 따른 라우팅

• 서비스 마다 다르지만 로그인여부에 따라 리디렉션을 해주는게 바람직하다.
• 예를들어 마이페이지에 들어갔는데 로그인이 안되있다면 로그인페이지로 리디렉션

구현

• App.jsx의 Router 컴포넌트 안에 PrivateRoute 컴포넌트와 PublicRoute 컴포넌트를 추가한다.
• 각각의 루트 컴포넌트 안에 로그인을 검증하는 isLogin()함수를 삽입하여 Rendering할 것인지, 혹은 Redirection할 것인지 판별한다.
• PrivateRoute 컴포넌트는 로그인 페이지로, PublicRoute 컴포넌트는 메인 페이지로 Redirection한다.

세션과 쿠키

• 둘 다 로그인과 같은 사용자 인증을 할 때 주로 사용
• 세션은 서버쪽에 정보를 저장하고 쿠키는 클라이언트 쪽에 정보를 저장한다.

출처: https://cotak.tistory.com/108

[React.js] 라우터를 이용한 접근 제한 구현 (Access Control & Authentication)

 

출처 : https://steadily-worked.tistory.com/831

[React] 로그인 여부에 따른 제한 접근 라우팅 구현하기(localStorage 사용)

 

출처 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=weekamp&logNo=220931266233

세션(Session)이란? 쿠키(Cookie)란?