페이지 중 누구나 진입이 가능한 페이지와, 로그인한 회원만 진입이 가능한 페이지 또는 로그인 한 회원은 진입하지 못하는 페이지 (예: login 페이지) , 관리자만 진입이 가능한 페이지가 있다. 이러한 인증 들은 어떻게 할 수 있을까?
이런 경우 higher-order component function 을 사용하면 된다.
Auth (HOC)
higher-order component function은 컴포넌트를 인자로 받아 새로운 컴포넌트를 리턴하는 함수이다.- 서버에 응답받은 유저의 상태 정보(로그인이 되어있는지, 로그인이 되어있지 않은지 관리자인지)에 따라 Auth function에 인자의 값을 다르게 줌으로써 페이지들의 인증을 컨트롤할 수 있다.
src/hoc/auth.js에 아래와 같이 파일을 만든다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
export default (SpecialComponent, option, adminRoute=null) => {
/*
예) option: null -> 누구나 출입이 가능한 페이지 (home)
true -> 로그인한 유저만 출입이 가능한 페이지
false -> 로그인한 유저는 출입이 불가능한 페이지
*/
const AuthenticateCheck = (props) => {
const isLoggedIn = useSelector(state => state.user.isLoggedIn);
useEffect(() => {
if (!isLoggedIn && option) {
props.history.push('/login');
}
}, []);
return (
<SpecialComponent />
)
};
return AuthenticateCheck;
};
- 위에서 작성한
auth.js파일을 불러온다. - 아래와 같이
src/App.js에서 hoc에 component와 option에 인자를 넣어 페이지들의 접근 권한을 컨트롤한다.- SpecialComponent = componen t
- option = boolean
- adminRoute = boolean
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { useSelector } from 'react-redux';
import Auth from './hoc/auth';
import Header from './components/Header/Header';
import MainPage from './components/MainPage/MainPage';
import LoginPage from './containers/LoginPage/LoginPage';
import SignUpPage from './components/SignUpPage/SignUpPage';
import AdminPage from './components/AdminPage/AdminPage';
import Menu from './components/Menu/Menu';
function App() {
const isLoggedIn = useSelector(state => state.user.isLoggedIn);
return (
<div className="App">
<BrowserRouter>
<Header />
{isLoggedIn && <Menu />}
<Switch>
<Route path='/' exact component={Auth(MainPage, null)} />
<Route path='/login' component={Auth(LoginPage, false)} />
<Route path='/signUp' component={Auth(SignUpPage, false)} />
/*
예) 관리자 페이지 세 번째 인자에 true라는 옵션을 주어 관리자만
들어갈 수 있는 페이지를 인증할 수 있다.
*/
<Route path='/admin' component={Auth(AdminPage, true, true)} />
</Switch>
</BrowserRouter>
</div>
);
};
export default App;