프로젝트 수정 8 - node.js로만 구성된 프로젝트에 리액트 추가(클라이언트 항목 : 인증하기)

* 현재 진행상황

- 프로젝트에 CRUD만 만든 상황

- fetch로 로그인 했으나 auth로 로그인 및 react로 로그인 화면을 만드는 것이 중요하다고 판단

- node.js 화면단을 ejs로 만들었으나 react에서 js로 만들 예정

- 참고 강의 : 따라하면서 배우는 노드, 리액트(로그인 부분)

 

* 프론트부분에서 인증이 필요한 부분

- 로그인 시 로그인 페이지/회원가입 페이지로 이동 못하게 하기 -> 가려고 하면 기본페이지(LandingPage)로 이동할 것

 

[인증 부분 만들기 - client 부분]

1. hoc/auth.js에서 인증 부분 만들기

2. hoc/auth.js에서 console.log(response)로 확인한 부분들로 조건문 만들기

3. _actions/_reducer에서 auth와 관련된 부분 만들기

4. App.js에서 hoc를 통해 auth 적용시키기

5. 구글 크롬에서 확인하기

 

* HOC 

* 출처 : (https://ko.reactjs.org/docs/higher-order-components.html)

 

1. hoc/auth.js에서 인증 부분 만들기

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


export default function (SpecificComponent, option, adminRoute = null) {
  //backned의 그 사람의 현재 상태 확인
  //api/user/auth로 정보 보내기
  function AuthentificationCheck(props) {
    const dispatch = useDispatch();
    const navigate = useNavigate();

    useEffect(() => {
      dispatch(auth()).then((response) => {
        console.log(response);
        }
      });
    }, []);

    return <SpecificComponent />;
  }

  return <AuthentificationCheck />;
}

 

 

2. hoc/auth.js에서 console.log(response)로 확인한 부분들로 조건문 만들기

	isAdmin	isAuth
로그인 하기 전	false	true
로그인 후	false	true
로그아웃 후	null(빈칸)	false

 

	LandingPage("/")	LoginPage("/login")	RegisterPage("/register")
isAdmin	true	false	false
isAuth	null	true	false

 

hoc/auth.js

 

import React, { useEffect } from "react";
import axios from "axios";
import { useDispatch } from "react-redux";
import { auth } from "../_actions/user_action";
import { useNavigate } from "react-router-dom";

export default function (SpecificComponent, option, adminRoute = null) {
  //backned의 그 사람의 현재 상태 확인
  //api/user/auth로 정보 보내기

  //null : 아무나 출입 가능
  //option이 true : 로그인 한 사람만 출입 가능
  //option이 false : 로그인한 유저는 출입 불가능

  function AuthentificationCheck(props) {
    const dispatch = useDispatch();
    const navigate = useNavigate();

    useEffect(() => {
      dispatch(auth()).then((response) => {
        console.log(response);
        //로그인 하지 않은 상태
        if (!response.payload.isAuth) {
          if (option === true) {
            //로그인으로 이동 시
            navigate("/login"); //로그인페이지로 가게 함
          }
        } else {
          //response.payload.isAuth = true
          //로그인한 상태(로그인페이지, 회원가입 페이지 이동하지 않아야 함)
          if (adminRoute && !response.payload.isAdmin) {
            //option이 true일 때
            navigate("/");
          } else {
            //option이 false일 때
            //false상태
            navigate("/");
          }
        }
      });
    }, []);

    return <SpecificComponent />;
  }

  return <AuthentificationCheck />;
}

 

 

3. _actions/_reducer에서 auth와 관련된 부분 만들기

 

_actions

 

//types
export const LOGIN_USER = "login_user";
export const REGISTER_USER = "register_user";
export const AUTH_USER = "auth_user";


//user_action
import axios from "axios";
import { LOGIN_USER, REGISTER_USER, AUTH_USER } from "./types";

export function loginUser(dataToSubmit) {
  const request = axios
    .post("/api/user/login", dataToSubmit)
    .then((response) => response.data);

  return {
    type: LOGIN_USER,
    payload: request,
  };
}

export function registerUser(dataToSubmit) {
  const request = axios
    .post("/api/user/register", dataToSubmit)
    .then((response) => response.data);

  return {
    type: REGISTER_USER,
    payload: request,
  };
}

export function auth() {
  //get 메소드는 body 부분 : dataToSubmit 필요 없음
  const request = axios.get("/api/user/auth").then((response) => response.data);

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

 

 

_reducer

 

//user_reducer.js
import { LOGIN_USER, REGISTER_USER, AUTH_USER } from "../_actions/types";

// eslint-disable-next-line import/no-anonymous-default-export
export default function (state = {}, action) {
  switch (action.type) {
    case LOGIN_USER:
      return { ...state, loginSuccess: action.payload };
    case REGISTER_USER:
      return { ...state, register: action.payload };
    case AUTH_USER:
      return { ...state, userData: action.payload };
      break;
    default:
      return state;
  }
}

 

 

 

4. App.js에서 hoc를 통해 auth 적용시키기

 

import { BrowserRouter, Routes, Route } from "react-router-dom";
import LandingPage from "./components/views/Landing/LandingPage";
import LoginPage from "./components/views/Login/LoginPage";
import RegisterPage from "./components/views/Register/RegisterPage";
import Auth from "./hoc/auth";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={Auth(LandingPage, null)} />
        <Route path="/login" element={Auth(LoginPage, false)} />
        <Route path="/register" element={Auth(RegisterPage, false)} />
      </Routes>
    </BrowserRouter>
  );
}
export default App;

 

 

5. 구글 크롬에서 확인하기

- 로그인 시 로그인페이지와 회원가입 페이지로 가는 대신 랜딩페이지("/")로 이동함