[ReactJS] 인증 체크하는 기능 구현하기

 

웹사이트에서 보면 로그인을 한사람만 진입이 가능한 페이지가 있고 로그인을 했더라도 어드민만 진입이 가능한 페이지가 있을 수 있습니다.

또는 댓글을 작성하거나 파일을 업로드 하는등의 기능도 권한에 따라서 허용되고 제한되는 경우가 있을것입니다.

이러한 권한을 인증하는 기능이 필요한데 이러한 Auth를 HOC(Higher-order component)를 이용하여 구현해보려고합니다.

HOC는 우선 function입니다.

function인데 다른 컴포넌트를 받은다음에 새로운 컴포넌트를 리턴합니다.

const EnhancedComponent = higherOrderComponent(WrappedComponent);

이처럼 컴포넌트를 받아오는데 새로운 컴포넌트를 리턴하는 것입니다.

 

Auth라는 컴포넌트가 HOC입니다. 여기에다가 다른 컴포넌트를 집어넣을수가 있는데 그로인해 새로운 컴포넌트를 리턴을 하는 것입니다.

이렇게 HOC에서 Back End에 요청을 보내게 되면 백엔드에서 상태를 리턴해줍니다.

리턴이된 상태를 보고 이 페이지에 들어올수 있는 권한이 있는지 판단을 해주는 것입니다.

만약 로그인페이지로 이동을 했을때 백엔드에 요청을 보내게 되면 백엔드에서 상태를 리턴받습니다.

만약 로그인이 되어있지 않은 유저라면 로그인페이지에 들어와서 로그인을 해야되지만 로그인이 이미 된 유저라면 로그인페이지가 아니라 Auth에서 다른페이지로 이동하도록 도와주는 것입니다.

 

 

import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { auth } from '../_actions/user_action';

export default function (SpecificComponent, option, adminRoute = null){

    // null -> 아무나 출입이 가능한 페이지
    // true -> 로그인한 유저만 출입이 가능한 페이지
    // false -> 로그인한 유저는 출입이 불가능한 페이지
    function AuthenticationCheck(props){
        const dispatch = useDispatch();

        useEffect(() => {
            dispatch(auth()).then(response => {
                // 로그인 하지 않은상태
                if(!response.payload.isAuth){
                    if(option === true) {
                        props.history.push('/login');
                    }
                // 로그인 한 상태
                } else {
                    if(adminRoute && !response.payload.isAdmin) {
                        props.history.push('/');
                    } else {
                        if(option === false) {
                            props.history.push('/');
                        }
                    }
                }
            })
        }, [])
        return (
            <SpecificComponent />
        )
    }
    return AuthenticationCheck
}

auth.js파일을 생성해서 이처럼 코드를 작성했습니다.

얼핏보면 다른 코드들과 피슷하지만 여러가지 처리가 많이 되어있습니다.

로그인이 되어있을경우 회원가입페이지와 로그인페이지로 접근하려했을때 랜딩페이지로 이동하도록 처리해주었고 로그인 되지 않았을때만 접근이 가능합니다.

 

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

import LandingPage from './components/views/LandingPage/LandingPage';
import RegisterPage from './components/views/RegisterPage/RegisterPage';
import LoginPage from './components/views/LoginPage/LoginPage';
import NavBar from './components/views/NavBar/NavBar';
import Footer from './components/views/Footer/Footer';
import Auth from './hoc/auth'

function App() {
  return (
    <Router>
      <div>
        <Switch>
          {/* <Route exact path="/">
            <LandingPage />
          </Route> */}
          <Route exact path="/" component={Auth(LandingPage, null, true)} />
          <Route exact path="/register" component={Auth(RegisterPage, false)} />
          <Route exact path="/login" component={Auth(LoginPage, false)} />
          <Route exact path="/navBar" component={NavBar} />
          <Route exact path="/footer" component={Footer} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

App.js파일에서도 이렇게 처리를 해주었습니다!!

 

다른 키다 처리는 로그인, 회원가입, 로그아웃을 구현한것과 비슷하게 처리하면 권한에 따른 페이지이동 기능이 완성됩니다.

 

https://github.com/KangCine/follow_and_learn_series/tree/master/01_basic

GitHub - KangCine/follow_and_learn_series

해당 프로젝트의 전체 코드는 제 깃허브에 올려놓았습니다!