노드&리액트 공부기록(15) - Auth(HOC), 인증 체크 방법

 

• 위와 같이 페이지 중에서는 아무나 진입 가능한 페이지, 로그인한 회원만 진이 가능한 페이지, 로그인한 회원은 진입하지 못하는 페이지가 있다.
• 또는 관리자만 진입 가능한 Admin Page도 있다.
• 이렇게 인증이 이루어져야만 하는 페이지, 혹은 댓글 작성,파일 전송, 파일 업로드 등 인증이 필요한 작업들이 있는데 이러한 인증은 어떻게 할 수 있을까? => higher-order component function을 사용하면 된다.

 

🔍Auth (HOC)

• higher-order component function 은 컴포넌트를 인자로 받아 새로운 컴포넌트를 리턴하는 함수이다.
• 서버에 응답받은 유저의 상태 정보(로그인 여부, 관리자인지 회원인지)에 따라 Auth function에 인자의 값을 다르게 줌으로써 페이지들의 인증을 컨트롤할 수 있다.

---

1. src/hoc/auth.js 파일 생성

 

2. user_action.js & user_reducer 파일에 auth 관련 action 추가, types.js에 AUTH_USER 타입 추가

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

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

export const AUTH_USER = "auth_user";

리턴값은 추후 수정하도록 한다.

case AUTH_USER:
            return{ ...state, userData: action.payload }

 

3. app.js 수정

• HOC는 다른 컴포넌트를 넣어서 컨트롤하는 것인데 아직 만들기만 하고 넣어주지 않았기 때문에 지금까지 만든 것으로는 아무 작동을 안한다.
• 이때 모든 컴포넌트가 담겨있는 app.js 를 이용해서 Auth로 감싸주면 된다. 
• null : 아무나 출입 가능한 페이지 / true : 로그인한 유저만 출입 가능한 페이지 / false : 로그인한 유저는 출입할 수 없는 페이지

mport LandingPage from './components/views/LandingPage/LandingPage'
import LogingPage from './components/views/LogingPage/LogingPage'
import RegisterPage from './components/views/RegisterPage/RegisterPage'
import Auth from './hoc/auth'

function App() {
  return (
    <BrowserRouter>
        <Routes>
        <Route exact path="/" element={Auth(<LandingPage/>, null)}/>
        <Route exact path='/login' element={Auth(<LogingPage/>, false)}/>
        <Route exact path='/register'element={Auth(<RegisterPage/>, false)}/>
        </Routes>
  </BrowserRouter>
  );
}

 

v6으로 변경되면서 수정사항!! 위에처럼 하면 안 되고 각 컴포넌트에

export default Auth(LoginPage, null);

export default Auth(LandingPage, false);

export default Auth(RegisterPage, false);

이렇게 수정해 주면 된다.

 

3. auth.js 에 각 상황에 따라 컨트롤할 코드 작성

• 로그인하지 않은 상태에서는 login 페이지로 이동, 관리자가 아닌 유저가 관리자페이지에 접속 시 랜딩 페이지로 이동, 로그인한 유저가 로그인했을 때 진입 불가한 페이지 진입 시 랜딩 페이지로 이동.