[도전 기술!] 접근 권한 처리

 

안녕하세요? 주니하랑 입니다.

본 내용은 주니하랑이 Web 개발 프로젝트를 하면서 도전했던 기술들에 대한 내용을 정리하는 곳 입니다!

이 글은 함께 프로젝트 했던 Front End 꿈나무 Crew가 작성한 것이에요.

주니하랑은 Back End 개발을 맡았었답니다!

 

 

---

 

 

로그인한 회원만 진입 가능한 페이지, 관리자만 진입 가능한 페이지 등을 구별해야 합니다.

저희 우도독의 회원 등급은 아래와 같습니다.

• GUEST → 비회원
• BLACK → 블랙 회원
• USER → 일반 회원
• ADMIN → 관리자

상위 등급은 하위 등급의 권한을 포함하고 있습니다.

React에서 특정 컴포넌트에 접근하기 전 인증을 체크해서 인증을 통과하지 않으면 아예 렌더를 안하게 하기 위해 HOC를 통해 특정 컴포넌트를 감싼 후 HOC의 단계에서 백단으로 axios을 날려서 해당 유저가 로그인된 상태인지, 유저등급은 무엇인지 체크하고 특정 컴포넌트로 접속하게 만들거나 강제로 다른 곳을 리다이렉트 해주었습니다.

 

 

교차 컴포넌트(HOC)란?

• HOC(Higher-Order-Component)
• 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수

 

HOC을 사용한 이유?

컴포넌트 내에서 권한 체크나 로그인 상태를 체크하기 보다는 인증 로직을 HOC로 분리하면 컴포넌트 재사용성도 높일 수 있고, 컴포넌트에서 역할 분리도 쉽게 할 수 있습니다.

 

작동 방식

라우터에서 해당 컴포넌트에 접속할 수 있는 회원의 등급을 매개변수로 설정합니다.

컴포넌트에 접근할 때 hoc -> auth 로직을 통해 'api/auth' get 메소드를 호출하여 설정한 매개변수와 해당 컴포넌트에 접근하는 회원의 퍼미션을 비교하여 조건에 부합하지 않다면 퍼미션 디나이를 진행합니다.

 

 

예시(App)

<Route path="/login" component={Auth(LogIn, 'GUEST')} />
// 로그인 페이지는 비회원인 GUEST만 접근 가능
<Route path="/mybookrecord" component={Auth(MyBookRecord, 'USER')} />
// 독서기록 페이지는 로그인한 사용자 모두 접근 가능
<Route path="/event/write" component={Auth(EventWrite,'ADMIN')} />
// 이벤트 작성 페이지는 관리자인 ADIM만 접근 가능

 

 

---

 

주니하랑의 글이 마음에 드셨나요? 구독과 공감! 그리고, 댓글은 주니하랑에게 많은 힘이 됩니다.