[#7] HOC를 이용한 Auth

📒HOC?

• Higher Order Component
• 다른 컴포넌트를 받아서 새로운 컴포넌트를 리턴함.

 

📒HOC 동작 구조

• Auth라는 HOC에서 Back-end에 Request를 날려서 현재 페이지에 들어와있는 사람의 상태정보(Admin 유저인지, 로그인된 유저인지, 로그인이 안된 유저인지) 를 가져옴.
• 페이지에 들어갈 수 있는 자격이 되는 유저면 들여보내고, 자격이 안되는 유저면 다른 페이지로 보내버림.

ex) *페이지 자격

• 아무나 진입 가능한 페이지: Landing Page, About Page
• 로그인한 회원만 진입 가능한 페이지: Detail Page
• 로그인한 회원은 진입 불가능한 페이지: Regitser Page, Login Page
• 관리자만 진입 가능한 페이지: Admin Page

 

📒소스코드

• Server/index.js 에서 get('/api/users/auth')로 API를 만들어 두었으므로 여기에 Request를 주면,  
  auth middleware에서 토큰을 이용해 넣어둔 쿠키를 이용해 유저의 자격을 판단함.
• [client/src/App.js]
  

  function App() {
    return (
      <Router>
        <div>
          <Switch>
          {/* Auth HOC로 감싸야 함.  */}
            <Route exact path="/" component={Auth(LandingPage, null)} /> 
            <Route exact path="/login" component={Auth(LoginPage, false)} />
            <Route exact path="/register" component={Auth(RegisterPage, false)} />
          </Switch>
        </div>
      </Router>
    );
  }​