Блог

Предположим, у меня есть приложение, в котором вы можете войти как пользователь, так и администратор, и у меня есть эти маршруты:

• вход
• Регистрация
• Главная
• Панель администратора (доступна только для администраторов)
• Мой профиль (доступен только для пользователей)

У меня был бы коммутатор с такими маршрутами:

 <Switch>
    <UnloggedRoute exact path='/login'>
        <Login />
    </Route>
    <UnloggedRoute exact path='/register'>
        <Register />
    </Route>
    <PrivateRoute exact path='/'>
        <HomePage />
    </Route>
    <AdminRoute exact path='/admin'>
        <Admin />
    </Route>
    <UserRoute exact path='/profile'>
        <Profile />
    </Route>
</Switch>
  

Итак, внутри PrivateRoute у меня есть условие, которое проверяет, вошел ли пользователь в систему, если нет, он перенаправляет на /login . В AdminRoute нем проверяется, является ли пользователь администратором, если нет, перенаправляет на / и у UserRoute меня есть условие, которое проверяет, является ли пользователь обычным пользователем, если нет, перенаправляет на / .

Наконец, у UnloggedRoute меня есть проверка, вошел ли пользователь в систему. Если это так, то он переходит к / .

Итак, мой вопрос: должен ли я оставить коммутатор таким, какой он есть, или я не должен отображать «Профиль» маршрута, если пользователь является администратором? Вот так:

 user.isAdmin() amp;amp; (
    <Route exact path='/admin'>
        <Admin />
    </Route>
)
  

Я чувствую, что первый способ более декларативный и его легче понять и управлять, но я хочу услышать мнения…

Итак, для моего приложения я сделал что-то очень похожее на то, как вы делали это первым способом. Мне приходилось иметь дело с 4 разными логинами, используя 5 разных маршрутов: MainRoute , TeacherRoute , StudentRoute , TutorRoute , и AdminRoute . Для моего использования я просто проверил каждый из этих маршрутов accountType (или isAdmin() в вашем случае) внутри самого маршрута следующим образом:

 const PrivateRouteAdmin = ({ component: RouteComponent, ...rest }) => {
  const { currentUser } = useContext(AuthContext);

  //If login is good, allow access or redirect to login
  if (!!currentUser) {
    return (
      <Route
        {...rest}
        render={routeProps =>
          (currentUser.isAdmin()) ? (
            <RouteComponent {...routeProps}
              currentUser={currentUser} />
          ) : (
              <Redirect to={"/incorrect-login"} />
            )
        }
      />
    )
  } else {
    //Bad login
    return (
      <Route
        {...rest}
        render={() => (
          <Redirect to={"/login"} />
        )}
      />
    )
  }
}

export default PrivateRoutedAdmin;
  

Пока вы проверяете маршруты таким образом внутри маршрутов, вам не нужно делать isAdmin() внутри Switch .

Кроме того, чтобы все было немного более организованно в вашем Switch , я бы сделал:

 <AdminRoute exact path='/admin' component={Admin} />