HOC(Higher Oder Component) Auth 인증체크

---

페이지 중 누구나 진입이 가능한 페이지와, 로그인한 회원만 진입이 가능한 페이지 또는 로그인 한 회원은 진입하지 못하는 페이지 (예: login 페이지) , 관리자만 진입이 가능한 페이지가 있다.

이러한 인증 들은 어떻게 할 수 있을까?

이런 경우 higher-order component function 을 사용하면 된다.

Auth (HOC)

• higher-order component function 은 컴포넌트를 인자로 받아 새로운 컴포넌트를 리턴하는 함수이다.
• 서버에 응답받은 유저의 상태 정보(로그인이 되어있는지, 로그인이 되어있지 않은지 관리자인지)에 따라 Auth function에 인자의 값을 다르게 줌으로써 페이지들의 인증을 컨트롤할 수 있다.
• src/hoc/auth.js에 아래와 같이 파일을 만든다.

import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';

export default (SpecialComponent, option, adminRoute=null) => {

  /* 
     예)  option: null -> 누구나 출입이 가능한 페이지 (home)
                 true -> 로그인한 유저만 출입이 가능한 페이지
                 false -> 로그인한 유저는 출입이 불가능한 페이지
  */

  const AuthenticateCheck = (props) => {
    const isLoggedIn = useSelector(state => state.user.isLoggedIn);

    useEffect(() => {
      if (!isLoggedIn && option) {
        props.history.push('/login');
      }
    }, []);

    return (
      <SpecialComponent />
    )

  };

  return AuthenticateCheck;

};

• 위에서 작성한 auth.js 파일을 불러온다.
• 아래와 같이 src/App.js에서 hoc에 component와 option에 인자를 넣어 페이지들의 접근 권한을 컨트롤한다.
  • SpecialComponent = componen t
  • option = boolean
  • adminRoute = boolean

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { useSelector } from 'react-redux';
import Auth from './hoc/auth';
import Header from './components/Header/Header';
import MainPage from './components/MainPage/MainPage';
import LoginPage from './containers/LoginPage/LoginPage';
import SignUpPage from './components/SignUpPage/SignUpPage';
import AdminPage from './components/AdminPage/AdminPage';
import Menu from './components/Menu/Menu';

function App() {
  const isLoggedIn = useSelector(state => state.user.isLoggedIn);

  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        {isLoggedIn && <Menu />}
        <Switch>
          <Route path='/' exact component={Auth(MainPage, null)} />
          <Route path='/login' component={Auth(LoginPage, false)} />
          <Route path='/signUp' component={Auth(SignUpPage, false)} />
          /* 
            예) 관리자 페이지 세 번째 인자에 true라는 옵션을 주어 관리자만 
                들어갈 수 있는 페이지를 인증할 수 있다.
          */
          <Route path='/admin' component={Auth(AdminPage, true, true)} />
        </Switch>
      </BrowserRouter>
    </div>
  );
};

export default App;