React 인증 체크(1)

HOC(HigherOrderComponent) : component를 인자를 받아서 new component를 return하는 함수이다.

const EnhancedComponent = higherOrderComponet(WrappedComponent);

Auth(HOC) Component에 다른 component를 넣어 줄 수 있다.

아래와 같은 흐름으로 사용자의 권한을 가져와서 사이트에서 사용할 수 있는 기능을 부여한다.

예시) 로그인이 안된 유저는 댓글을 남길 수 없다.

AUTH $\rarr$ request $\rarr$ Backend $\rarr$ return 상태 $\rarr$ AUTH

---

코드

auth.js

import axios from 'axios';
import React,{useEffect} from 'react';
import { useDispatch } from 'react-redux';
import {auth} from '../_actions/user_action'
//adminRoute 인자는 아무런 값이 없으면 NULL이다. 
//HOC
export default function (SpecifiComponent, option, adminRoute = null) {

    //null   => 아무나 출입이 가능
    //true   => 로그인한 유저만 출입이 가능한 페이지
    //false  => 로그인한 유저는 출입 불가능 페이지




    function AuthenticationCheck(props) {

        const dispath = useDispatch(auth);
        
        useEffect(() => {

            dispatchEvent(auth().then(response => {
                console.log()
            })
            
          
        }, [])
    }
}

---

export function auth() {
    
    //axios를 request에 지정 -> 결론적으로 response된 data를 request에 저장한다.
    //return을 시켜서 reducer에 보내야한다.
    const request = axios.get('/api/users/auth')
    .then(response => response.data)

    return{
        type: AUTH_USER,
        payload : request
    }

}

---

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

import LandingPage from './component/views/LandingPage/LandingPage';
import LoginPage from './component/views/LoginPage/LoginPage';
import RegisterPage from './component/views/RegisterPage/RegisterPage';
import Auth from './hoc/auth'
function App() {
  return (
    <Router>
    <div>
      <hr />

//만들어준 Auth(HOC)인자값으로 각 페이지를 넣어준다.
      <Routes>
        <Route path="/" element={Auth(LandingPage, null) } />
        <Route path="/login" element={Auth(LoginPage, false)} />
        <Route path="/register" element={Auth(RegisterPage, false)} />
      </Routes>
    </div>
  </Router>
);
}

---

//userData를 받는다.
    case AUTH_USER:
            return{...state, userData:action.payload}

---