로그인/회원가입 - #23 인증(END)

페이지를 진입하기전에 인증을 통한 분기를 구현해보자.
인증이 필요한 이유는 우선 로그인이 되어있어야만 접근이 가능한 페이지도 있고, 로그인이 안되어있어야만 접근이 가능한 페이지가 있다.
또한 관리자만이 접근할 수 있는 페이지가 있을것이다.
이렇게 인증에 따라 접근하수있는페이지가 존재하며 조건에 맞지 않을시 다른페이지로 보내는 로직등을 수행할 수 있다.

HigherOrderComponent Function

어떠한 페이지로 넘어가기전에 이 HOC함수로 넘어와 인증을 먼저 하고 넘어가는 중간 다리역활을 하는 함수이다.
만약 해당 유저가 현재페이지에 들어갈 자격이 되는지를 알아 낸 후에 자격이 된다면 AdminComponent에 가게 해주고 아니라면 다른 페이지로 보내버린다.

그렇다면 어떻게 권한을 체크할것인가?
앞에서 Server를 구현할 때 /api/users/auth라는 요청에 대한 로직을 처리한 적이 있다.
서버에 요청을 통해 현재 내가 로그인을 했는지 또는 관리자인지에 대한 정보를 응답받을 수 있다. 해당 요청에 의해 상태를 업데이트 한 뒤, 권한을 체크하여 페이지를 분기한다.

auth.js

우선 hoc폴더 아래 auth.js라는 파일을 생성한다.
그리고 코드는 아래처럼 작성한다.

그리고 인증을 모든 페이지의 이동시에 적용을 해주기위해서
app.js에서 해당 auth.js를 불러와 컴포넌트에 적용을 해줘야한다.
위처럼 Auth를 불러온뒤 component앞에 Auth()로 묶어서 보내준다. 현재 내가 구현한 페이지에서는 로그인했을때 로그인페이지 혹은 회원가입 페이지를 가려고할때 다시 홈으로 되돌아 온다.

작은 프로젝트를 마치며

로그인과 회원가입을 구현하는 작은 프로젝트를 서버부터 클라이언트까지 노드와 리액트 리덕스를 이용해서 끝맞쳤다.
작은 기능이지만 로직의 흐름은 쭉 이어져있고 인증까지 구현을 하려니 많이 어렵고 흐름파악이 아직 확실하게 된 상태는 아니다.
하지만 경험을 해보았고, 다음에 이런 로직을 만들거나 필요로 할때 좀더 능숙하게 기능들을 만들 수 있을것 같다.
지금 한것은 다른 프로젝트들의 기본이 되는 보일러 플레이트이다.
다른 프로젝트들도 이것저것 만들어보며 빠르게 성장을 하고 싶다.