Я создаю веб-приложение, которое имеет 3 типа пользователей.
- Гость Пользователь
- Зарегистрированный пользователь
- Администратор / Суперпользователь
Когда пользователь вошел в систему, я установил localstorage с usertype :
И пользователь, и суперпользователь имеют разные страницы входа. Если пользователь вошел в систему, то
localstorage.setItem("type", "user");
А если вошел пользователь Super, то
localstorage.setItem("type", "admin");
Теперь, исходя из этого, как я могу установить маршруты? Если пользователь вошел в систему, он может иметь доступ только к пользовательским маршрутам и то же самое для суперпользователя.
// Маршруты ядра UI Theme.
Я создал userroutes.js и adminroutes.js
Общий route.js
import React from 'react';
const Home = React.lazy(() => import('./views/Home/Home'));
const About = React.lazy(() => import('./views/About/About'));
const routes = [
{ path: '/', exact: true, name: 'Home', component: Home },
{ path: '/about-us', exact: true, name: 'About-Us', component:
About}
];
export default routes;
userroute.js и adminroute.js имеют разные маршруты.
Вот чтопытается
<Suspense fallback={this.loading()}>
<Switch>
{this.state.type === "user" ? userroutes.map((route, idx) => {
return userroutes.component ? (
<Route
key={idx}
path={route.path}
exact={route.exact}
name={route.name}
render={props => (
<route.component {...props} />
)} />
) : (null);
}) : ""}
{/* <Redirect from="/" to="/dashboard" /> */}
</Switch>
</Suspense>
Будет ли это работать? Или есть лучшее решение для этого?