구독관리서비스 팀 프로젝트 - 2

이번엔 인증 관련 이야기를 해볼까 한다.

사용자가 로그인을 한 상태일때 / 아닌 상태일 때 이 두가지로 나눠서 생각해본다면

전자의 경우 메인 페이지인 구독관리페이지, 유저 정보 페이지 등 인증이 필요한 페이지, 즉 컴포넌트에 접근할 수 있고 인증이 필요하지 않아야 하는 컴포넌트에는 접근할 수 없어야한다.

후자의 경우 로그인, 회원가입 등 인증이 필요하지 않아야 하는 컴포넌트에 접근가능하고 인증이 필요한 컴포넌트엔 접근하면 안된다.

그래서 각각의 컴포넌트에 useEffect를 활용하여 접근할 때 인증을 검사하려 했는데 권한이 필요한 컴포넌트를 다루는 방식에 대한 글을 보게 되었다.

const RouteIf = ({ role, component: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={props => {
        // 권한 체크
        if (role === ROLE.NONE) {
          return <FobiddenPage />
        }

        if (Component) {
          // role을 컴포넌트에 전달
          return <Component {...props} role={role} />
        }

        return null
      }}
    />
  )
}

이렇게 props중 role에 따라 컴포넌트를 return 해주는 라우트 컴포넌트를 정의해주고

<BrowserRouter>
  <Switch>
    <Route path="/" exact component={HomePage} />
    <RouteIf
      path="/users"
      exact
      component={UserManagePage}
      role={myRole.usersPage}
    />
  </Switch>
</BrowserRouter>

Switch안에서 해당 컴포넌트를 사용하여 판별값인 role과 컴포넌트 등을 props로 넘겨주면 우리가 원하는 결과를 얻을 수 있다.

하지만 나는 다음과 같이 사용했다.

function App() {
  const [authenticated, setAuthenticated] = useState(false);

  ...
    
  return (
    <div className="container mx-auto h-full font-sans bg-blue-50 px-7 overflow-y-auto md:relative">
      <Switch>
        <Route exact path="/">
          {authenticated ? <HomeRoute /> : <Redirect to="/login" />}
        </Route>
        <Route path="/login">
          {!authenticated ? <Login /> : <Redirect to="/" />}
        </Route>
        <Route exact path="/register">
          {!authenticated ? <Register /> : <Redirect to="/" />}
        </Route>
        <Route exact path="/detail">
          {authenticated ? <Detail /> : <Redirect to="/login" />}
        </Route>
        <Route exact path="/dropout">
          {authenticated ? <Dropout /> : <Redirect to="/login" />}
        </Route>
        <Route path="/resetpwd" component={ResetPassword} />
      </Switch>
    </div>
  );
}
...

authenticated 라는 상태를 두어 useEffect를 이용해 authenticated의 상태를 변경해줬고, 해당 path로 접근했을 때 authenticated 값에 따라 접근을 설정해주었다.

처음 써보는 기능으로써 이렇게 구현하는 것이 맞는진 모르겠지만 원하는 결과를 얻었기에 뿌듯했다.