웹/React.js
[React.js] 라우터를 이용한 접근 제한 구현 (Access Control & Authentication)
사용자의 로그인 상태나 권한에 따라 접근할 수 있는 경로가 다르다. 물론 서버쪽에서 체크를 해주긴 하지만, 해당 URL로 넘어간다는 것 자체를 프론트측에서 막아주는 것이 바람직하다. 이를 그림으로 표현하면 다음과 같다. 1. 접근 제한 (Access Control) PrivateRoute는 로그인한 사용자에게 제공되는 루트이고, 만약 로그인하지 않은 사용자가 이 루트로 접근하고자 한다면 로그인 페이지로 Redirection한다. 반대로, PubilcRoute는 로그인 여부와 상관없이 사용자에게 제공되는 루트이다. 아래 그림과 같이 이미 로그인한 사용자가 해당 루트로 접근하는 것을 막고자 한다면 restricted 옵션을 줘서 제어할 수 있다. 2. 구현 1) 로직 App.jsx의 Router 컴포넌트 안..
