Archive

Auth Boiler Plate View with React,Redux - Auth

01 May 2021 | Node.js React

Boiler Plate with React,Redux - Auth

Auth

HOC (Higer Order Component)로 Auth 컴포넌트를 만들어서 이 안에 제한된 페이지의 컴포넌트를 넣어준다

그러면 이 제한된 페이지에 접속시 이 사용자가 인증된 사용자인지 HOC가 판별을 해준다

// hoc/auth.js

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

export default function (SpecificComponent, option, adminRoute = null) {
  // option settings
  // null => 아무나 출입
  // true => 로그인한 유저만 출입
  // false => 로그인한 유저는 출입 불가

  function AuthenticationCheck(props) {
    const dispatch = useDispatch();

    useEffect(() => {
      dispatch(auth()).then((response) => {
        console.log(response);

        // 로그인하지 않은 상태
        if (!response.payload.isAuth) {
          if (option) {
            props.history.push('/login');
          }
        } else {
          // 로그인 한 상태
          if (adminRoute && !response.payload.isAdmin) {
            // 관리자만 들어갈 수 있는 페이지 접속시
            props.history.push('/');
          } else {
            if (option === false) {
              props.history.push('/');
            }
          }
        }
      });
    }, []);

    return <SpecificComponent />;
  }

  return AuthenticationCheck;
}


// user_action.js

export function auth() {
  const request = axios.get('/api/users/auth').then((response) => {
    return response.data;
  });

  return {
    type: actions.AUTH_USER,
    payload: request,
  };
}

미리 서버에 만들어놓은 auth api를 통해 인증에 통과한 사용자의 데이터를 전부 받아다가 payload에 넣어준다


// user_reducer.js

import * as actions from '../_actions/types';

export default function (state = {}, action) {
  switch (action.type) {
    case actions.LOGIN_USER:
      return {
        ...state,
        loginSuccess: action.payload,
      };
    case actions.REGISTER_USER:
      return {
        ...state,
        register: action.payload,
      };
    case actions.AUTH_USER:
      return { // 로그인한 사용자 정보 저장
        ...state,
        userData: action.payload,
      };
    default:
      return state;
  }
}


이렇게 만든 hoc를 router에 의해 페이지 이동을 하는 App.js에서 사용한다

// App.js

import Auth from './hoc/auth';

function App() {
  return (
    <BrowserRouter>
      <div>
        <Switch>
          <Route exact path='/' component={Auth(LandingPage, null)} />
          <Route exact path='/login' component={Auth(LoginPage, false)} />
          <Route exact path='/register' component={Auth(RegisterPage, false)} />
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

Auth HOC로 각 페이지 컴포넌트들을 한 번 더 감싸주고 두 번째 인자로 option을 넣어주는데 메인 페이지는 로그인 하던 안하던 상관 없으니 null을 주고 나머지 로그인, 회원가입 페이지는 로그인한 유저가 진입할 수 없도록 false를 넣어준다

HOC에서 나눠놓은 분기에 이 option에 의해 로그인한 유저가 회원가입, 로그인창 진입시 다시 메인 페이지로 redirect되게 된다


참고 자료

기초 노드 리액트 강의 - John Ahn

Related Posts