#33 인증 체크

[인프런] 따라하며 배우는 노드, 리액트 시리즈 - 기본강의를 들으며 정리한 내용입니다.

 

HOC : Higher Order Component
다른 컴포넌트를 받아 새로운 컴포넌트를 리턴하는 함수

 

 

1. hoc/auth.js 파일 생성하기

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

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

	function AuthenticationCheack() {
		const dispatch = useDispatch();
		const navigate = useNavigate();

		useEffect(() => {
			dispatch(authUser()).then((response) => {
				if (!response.payload.isAuth) {
					if (option) {
						navigate("/login");
					}
				} else {
					if (adminRoute && !response.payload.isAdmin) {
						navigate("/");
					} else {
						if (option === false) {
							navigate("/");
						}
					}
				}
			});
		}, []);
		return <SpecificComponent />;
	}

	return <AuthenticationCheack />;
}

 

2. types.js 파일에 AUTH_USER 타입 추가하기

types.js 파일에 AUTH_USER 타입 추가하기

 

3. user_action.js 파일에 authUser 함수 추가하기

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

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

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

 

4. user_reducer.js파일에 case 추가하기

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

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 };

		default:
			return state;
	}
}

 

5. App.js파일에서 Auth로 컴포넌트 감싸주기

import Auth from "../../hoc/auth";

function App() {
	return (
		<Router>
			<Routes>
				<Route exact path="/" element={Auth(LandingPage, null)}></Route>
				<Route exact path="/LoginPage" element={Auth(LoginPage, false)}></Route>
				<Route
					exact
					path="/RegisterPage"
					element={Auth(RegisterPage, false)}
				></Route>
			</Routes>
		</Router>
	);
}