라우터를 이용한 접근 제한 구현

사용자의 로그인 상태나 권한에 따라서 접근 할 수 있는 경로가 다릅니다.

물론 서버 쪽에서 체크를 해주긴 하지만, 해당 URL로 넘어간다는 것 자체를 프론트측에서 막아주는 것이 바람직 합니다.

이를 그림으로 표현하면 아래와 같습니다.

 

1. 접근 제한

: PrivateRoute는 로그인한 사용자에게 제공되는 루트이고, 만약 로그인 하지 않은 사용자가 해당 루트로 접근한다면 로그인 페이지로 Redirection을 합니다.

 

반대로, PublicRoute는 로그인 여부와 상관없이 사용자에게 제공되는 루트입니다.

아래 그림과 같이 이미 로그인한 사용자가 해당 루트로 접근하는 것을 막고자 한다면 restricted 옵션을 줘서 제어합니다.

 

2. 구현

 

로직

( Redirection : 방향 지정, 방향 이동 )

- App.jsx의 Router 컴포넌트 안에 PrivateRoute 컴포넌트와 PublocRoute 컴포넌트를 추가합니다.

- 각각의 루트 컴포넌트 안에 로그인을 검증하는 isLogin() 함수를 삽입하여 Redering 할 것인지, 혹은 Redirection을 할 것인지 판별한다.

- PrivateRoute 컴포넌트는 로그인 페이지로, PublicRoute 컴포넌트는 메인 페이지로 Redirection 한다.

 

코드는 출처에서 보면 될 듯 하다.

https://cotak.tistory.com/108

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

 

출처

https://velog.io/@public_danuel/Restrict-Route

React Router 제한적 경로 접근

 

+ 구현하는 방법은 아래 블로그를 참고하면 좋을 것 같다!

https://gaemi606.tistory.com/entry/React-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%A0%95%EB%B3%B4-%EC%97%86%EC%9D%84-%EA%B2%BD%EC%9A%B0-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%ED%8E%98%EC%9D%B4%EC%A7%80%EB%A1%9C-redirect%ED%95%98%EA%B8%B0-react-router-PrivateRoute

React | 로그인 정보 없을 경우 로그인 페이지로 redirect하기 ( react-router, PrivateRoute, 로그인 권한 )