[Node.js] Auth 기능 만들기 (tistory.com)
[Node.js] Auth 기능 만들기
https://youtu.be/OGVsnbEbSLM?si=Wvx3Btu8ptwH0WYH 본 포스팅은 John Ahn님의 유튜브 강의를 참고하였습니다. 웹 서비스에서는 로그인 여부에 따라 접속할 수 있는 페이지가 있고, 회원만 사용할 수 있는 페이지
pufrontend.tistory.com
서버에서 만든 Auth 기능을 만들었었습니다.
클라이언트에도 적용시킬 차례입니다.
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) {
//null => 아무나 출입이 가능한 페이지
//true => 로그인한 유저만 출입이 가능한 페이지
//false => 로그인한 유저는 출입 불가능한 페이지
function AuthenticationCheck(props) {
const dispatch = useDispatch();
const navigate = useNavigate();
useEffect(() => {
dispatch(auth()).then(response => {
console.log(response)
//로그인 하지 않은 상태
if (!response.payload.isAuth) {
if (option) {
navigate('/login')
}
} else {
//로그인 한 상태
if (adminRoute && !response.payload.isAdmin) {
navigate('/')
} else {
if (option === false)
navigate('/')
}
}
})
}, [])
return (
<SpecificComponent />
)
}
return AuthenticationCheck
}
Auth.js의 코드입니다.
여기서는 Auth 컴포넌트를 정의합니다.
파라미터로 오는 SpecificComponent는 해당 페이지의 컴포넌트를 의미합니다.
option은
1. null
- 로그인 여부에 상관없이 페이지에 접속 가능 ex) 메인 페이지
2. true
- 로그인한 유저만 출입 가능 ex) 기능수행 페이지
3. false
- 로그인한 유저는 출입 불가능 ex) 회원가입, 로그인 페이지
특성에 맞게 3개 중 한 개의 파라미터가 들어갑니다.
adminroute는 단어 그대로 관리자만 들어갈 수 있는지 여부가 파라미터로 들어갑니다.
dispatch(auth()).then(response => {
console.log(response)
//로그인 하지 않은 상태
if (!response.payload.isAuth) {
if (option) {
navigate('/login')
}
} else {
//로그인 한 상태
if (adminRoute && !response.payload.isAdmin) {
navigate('/')
} else {
if (option === false)
navigate('/')
}
}
})
여기서는
로그인 하지 않은 상태라면 로그인 페이지로 이동시킵니다.
로그인을 한 상태라면 메인 페이지로 이동시킵니다.
이제 만든 Auth함수를 app.js에서 router에 적용시킵니다.
import React from 'react';
import {
BrowserRouter as Router,
Routes,
Route,
} 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/auth';
function App() {
const AuthLandingPage = Auth(LandingPage, null);
const AuthLoginPage = Auth(LoginPage, false);
const AuthRegisterPage = Auth(RegisterPage, false);
return (
<Router>
<Routes>
<Route path="/" element={<AuthLandingPage />} />
<Route path="/login" element={<AuthLoginPage />} />
<Route path="/register" element={<AuthRegisterPage />} />
</Routes>
</Router>
);
}
export default App;
Auth를 import해오고
const AuthLandingPage = Auth(LandingPage, null);
const AuthLoginPage = Auth(LoginPage, false);
const AuthRegisterPage = Auth(RegisterPage, false);
Auth를 적용시킬 페이지를 컴포넌트로 새로 만듭니다.
이때 3번째 파라미터는 특수한 상황이 아니라면 제외해도 무방합니다.
각 루트에 Auth페이지 컴포넌트들을 요소로 넣습니다.
이렇게 해서 로그인 여부에 따라서
페이지 이동을 제한할 수 있는
Auth 기능까지 적용시켜 봤습니다.
이제 이 로그인 기능을 프로젝트에 적용한 일만 남았습니다.
읽어주셔서 감사합니다!
