📚 Protected Route

React 기반 프로젝트를 진행하면서 특정 페이지에 로그인 유저만 접근할 수 있도록 설정하는 <Protected Route> 컴포넌트를 만들어보았다.

Protected Route 란?

Protected Route란 인증된 사용자만 접근할 수 있는 경로(Route), 혹은 그것을 구현하는 방식을 말한다.

우리가 어떤 사이트를 이용하다 보면 특정 서비스를 이용하기 위해 버튼을 클릭하면 로그인 후 이용해달라는 문구를 본 적이 있을 것이다. 로그인 한 유저라면 해당 버튼을 누르면 서비스를 이용할 수 있는 페이지로 바로 이동할 수 있겠지만, 로그인 하지 않은 유저들은 이용할 수 없도록 보호해 둔 것이다.

이처럼 특정 페이지를 인증된 사용자, 즉 로그인을 완료한 유저만 이용가능하도록 설정하는 것을 보호된 루트 즉, Protected Route라고 부른다.

보통 유저의 인증 상태를 확인한 후, 조건을 만족하지 않으면 홈이나 로그인 페이지로 리다이렉트함으로써 비인증 유저의 접근을 제한한다.

구현 방법

인증 여부를 확인하여 자식 컴포넌트를 렌더링하게끔 만드는 ProtectedRoute 컴포넌트를 생성하고, 이를 기존의 Router에 활용하면 된다.

1. <ProtectedRoute> 컴포넌트 생성

로그인, 회원가입 시에 업데이트 되는 상태값 isLoginUser를 이용해 로그인 상태가 아니라면 react-router-dom의 Navigate 컴포넌트를 이용하여 메인페이지인 '/'로 이동하도록 설정했다.

replace 속성을 이용해 리다이렉션 시 히스토리 스택에 현재 페이지를 남기지 않고 대체한다. 다시 말해, 뒤로 가기 버튼을 눌렀을 때, 방금 전 방문했던 페이지가 아닌 그 이전의 페이지로 돌아간다.

2. Router 설정

페이지 루트를 설정하는 Router 파일에서 아래와 같이 <ProtectedRoute> 컴포넌트를 불러와 보호해야 할 컴포넌트를 감싸서 사용한다.

내가 구현 중인 사이트에서는 회원가입 후 사용할 수 있는 기능이 Nav에 표시되고, 로그아웃 시 해당 버튼이 사라진다. 표면적으로는 <ProtectedRoute>가 필요 없어 보일 수 있다. 하지만 페이지 링크를 통해 직접 접근하거나 뒤로 가기 버튼을 눌렀을 때, 로그아웃 상태에서도 해당 페이지에 접근할 수 있기 때문에 <ProtectedRoute> 설정이 반드시 필요하다.

참고 사이트 : https://velog.io/@frontendohs/React%EB%A1%9C-Protected-Router-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0