[feat] Create page access authority with login state

-
 import React from "react";
 import {
   BrowserRouter as Router,
   Switch,
   Route,
-  Link
+  //Link
 } from "react-router-dom";
 
 import LandingPage from './components/views/LandingPage/LandingPage'
 import LoginPage from './components/views/LoginPage/LoginPage'
 import RegisterPage from './components/views/RegisterPage/RegisterPage'
-
+import auth from './hoc/authentication'
 
 function App() {  
   return (
     <Router>
       <div>
-        {/*
-          A <Switch> looks through all its children <Route>
-          elements and renders the first one whose path
-          matches the current  URL. Use a <Switch> any time
-          you have multiple routes, but you want only one
-          of them to render at a time
-        */}
         <Switch>
-          <Route exact path="/">
-            <LandingPage />
-          </Route>      {/*   
-                        <Route exact path="/" component={LandingPage} /> 로 해도 똑같은 결과가 나옴! 
-                        */}
+                                               {/* null, false에 대한 옵션 설명은 auth로 가서 확인*/}
+          
+          <Route exact path="/" component={auth(LandingPage, null)} />     
 
-          <Route path="/login">
-            <LoginPage />
-          </Route>
+          <Route exact path="/login" component={auth(LoginPage, false)}/>
 
-          <Route path="/register">
-            <RegisterPage />
-          </Route>
+          <Route exact path="/register" component={auth(RegisterPage, false)}/>
+          
+          {/*
+          <Route exact path="/" component={LandingPage} />     
+
+          <Route exact path="/login" component={LoginPage}/>
+
+          <Route exact path="/register" component={RegisterPage}/>
+          */}
           </Switch>
       </div>
     </Router>

@@ -2,3 +2,4 @@
 
 export const LOGIN_USER = "login_user";
 export const REGISTER_USER = "resgier_user";
+export const AUTH_USER = "auth_user";
\ No newline at end of file

 import axios from 'axios';
 import {
     LOGIN_USER,
-    REGISTER_USER
+    REGISTER_USER,
+    AUTH_USER
 } from './types';
 export function loginUser(logInfo) {
     const request = axios.post('/api/users/login', logInfo) // logInfo를 post로 전달
@@ -21,7 +22,7 @@ export function RegisterUser(regInfo) {
     const request = axios.post('/api/users/register', regInfo) // logInfo를 post로 전달
         .then(response => response.data); // 서버에서 받은 데이터를 request에 저장
 
-    return {    // return을 통해 Reducer로 보냄 
+    return {    // return을 통해 Reducer로 보냄.
                 // Reducer에서 previousState, action을 이용해 nextState로 만들기 때문 :: (previousState, action) => nextState
                 // request를 reducer로 보내는 작업
 
@@ -30,3 +31,14 @@ export function RegisterUser(regInfo) {
         payload: request    // payroad == response
     }
 }
+
+export function auth() {
+    const request = axios.get('/api/users/auth') // logInfo를 post로 전달
+        .then(response => response.data); // 서버에서 받은 데이터를 request에 저장
+
+    return {    
+
+        type: "AUTH_USER",
+        payload: request    // payroad == response
+    }
+}
\ No newline at end of file

 import {
     LOGIN_USER,
-    REGISTER_USER
+    REGISTER_USER,
+    AUTH_USER
 } from '../_actions/types';
 
 
@@ -10,9 +11,15 @@ export default function (prevState = {}, action) {
         case LOGIN_USER:
             return {...prevState, loginSuccess:action.payload}  // 위의 prevState를 그대로 가져오고,
                                         // user_action.js에 있는 payload를 그대로 가져와서 return.
+                                        // loginSuccess는 server/index.js 에서 login에 성공하면 json type으로 loginSuccess: true를 전달하라고 했기 때문
             break;
         case REGISTER_USER:
             return {...prevState, success:action.payload}
+                                // success는 server/index.js 에서 register에 성공하면 json type으로 success: true를 전달하라고 했기 때문
+            break;
+
+        case AUTH_USER:
+            return {...prevState, user:action.payload}
             break;    
         default:
             return prevState;

+// 사용자의 상태를 보고
+// 해당 페이지에 들어갈 수 있게 할지 안할지 결정해 줌. hoc 이용.
+import axios from 'axios';
+import React, {useEffect} from 'react';
+//import {useEffect} from 'react';
+import {useDispatch} from 'react-redux';
+import {auth} from '../_actions/user_action'
+
+
+export default function (SpecificComponent, option, adminRoute = null){
+                                            // ㄴ option 종류
+                                            //   - null  아무나 출입 가능한 페이지
+                                            //   - true  로그인한 유저만 출입 가능
+                                            //   - false 로그인한 유저 출입 불가능
+
+    function AuthenticationCheck(props) {
+        //1. backend에 request를 날려서 사용자의 상태를 확인
+        const dispatch = useDispatch(); // 1-1. dispatch 사용
+        useEffect(() => {  
+            dispatch(auth()) // 페이지가 이동할 때마다 dispatch가 작동해서 backend에 request를 줌 
+            .then(response => { // 받은 response
+                console.log(response);
+                
+
+                // 로그인 안했다면
+                if(!response.payload.isAuth) {
+                    if(option) {  // 만약 위 option이 true이면 (로그인한 유저만 출입 가능한 페이지로 가게 하려면)
+                        props.history.push('/login');   // 로그인 하게 함
+                    }
+                }
+                
+                // 로그인 했다면
+                else {
+                    if(adminRoute && !response.payload.isAdmin) {  // admin만 갈 수 있는 페이지를 admin이 false 사람이 들어가려 한다면
+                        props.history.push('/');    // 홈페이지로 돌아가게 함
+                    }
+                    else { 
+                        if(option===false) {// 로그인한 유저가 출입 불가능한 곳을 가려고 한다면
+                            props.history.push('/'); // 홈페이지로 돌아가게 함
+                
+                        }
+                    }
+                }
+                })
+        },[])
+    
+        return (
+            <SpecificComponent />
+        )
+        
+        }
+
+    return AuthenticationCheck
+}
\ No newline at end of file