react-router - 如何保护核心ui中的路由反应
问题描述
我已经从核心 ui 下载了反应管理仪表板,现在我需要保护其中定义的仪表板路由,那么我该怎么做,
路由.js
import React from 'react';
import Loadable from 'react-loadable'
import DefaultLayout from './containers/DefaultLayout';
function Loading() {
return <div>Loading...</div>;
}
const Breadcrumbs = Loadable({
loader: () => import('./views/Base/Breadcrumbs'),
loading: Loading,
});
const Cards = Loadable({
loader: () => import('./views/Base/Cards'),
loading: Loading,
});
const Carousels = Loadable({
loader: () => import('./views/Base/Carousels'),
loading: Loading,
});
const Collapses = Loadable({
loader: () => import('./views/Base/Collapses'),
loading: Loading,
});
const Dropdowns = Loadable({
loader: () => import('./views/Base/Dropdowns'),
loading: Loading,
});
const Forms = Loadable({
loader: () => import('./views/Base/Forms'),
loading: Loading,
});
const Jumbotrons = Loadable({
loader: () => import('./views/Base/Jumbotrons'),
loading: Loading,
});
const ListGroups = Loadable({
loader: () => import('./views/Base/ListGroups'),
loading: Loading,
});
const Navbars = Loadable({
loader: () => import('./views/Base/Navbars'),
loading: Loading,
});
const Navs = Loadable({
loader: () => import('./views/Base/Navs'),
loading: Loading,
});
const Paginations = Loadable({
loader: () => import('./views/Base/Paginations'),
loading: Loading,
});
const Popovers = Loadable({
loader: () => import('./views/Base/Popovers'),
loading: Loading,
});
const ProgressBar = Loadable({
loader: () => import('./views/Base/ProgressBar'),
loading: Loading,
});
const Switches = Loadable({
loader: () => import('./views/Base/Switches'),
loading: Loading,
});
const Tables = Loadable({
loader: () => import('./views/Base/Tables'),
loading: Loading,
});
const Tabs = Loadable({
loader: () => import('./views/Base/Tabs'),
loading: Loading,
});
const Tooltips = Loadable({
loader: () => import('./views/Base/Tooltips'),
loading: Loading,
});
const BrandButtons = Loadable({
loader: () => import('./views/Buttons/BrandButtons'),
loading: Loading,
});
const ButtonDropdowns = Loadable({
loader: () => import('./views/Buttons/ButtonDropdowns'),
loading: Loading,
});
const ButtonGroups = Loadable({
loader: () => import('./views/Buttons/ButtonGroups'),
loading: Loading,
});
const Buttons = Loadable({
loader: () => import('./views/Buttons/Buttons'),
loading: Loading,
});
const Charts = Loadable({
loader: () => import('./views/Charts'),
loading: Loading,
});
const Dashboard = Loadable({
loader: () => import('./views/Dashboard'),
loading: Loading,
});
const CoreUIIcons = Loadable({
loader: () => import('./views/Icons/CoreUIIcons'),
loading: Loading,
});
const Flags = Loadable({
loader: () => import('./views/Icons/Flags'),
loading: Loading,
});
const FontAwesome = Loadable({
loader: () => import('./views/Icons/FontAwesome'),
loading: Loading,
});
const SimpleLineIcons = Loadable({
loader: () => import('./views/Icons/SimpleLineIcons'),
loading: Loading,
});
const Alerts = Loadable({
loader: () => import('./views/Notifications/Alerts'),
loading: Loading,
});
const Badges = Loadable({
loader: () => import('./views/Notifications/Badges'),
loading: Loading,
});
const Modals = Loadable({
loader: () => import('./views/Notifications/Modals'),
loading: Loading,
});
const Colors = Loadable({
loader: () => import('./views/Theme/Colors'),
loading: Loading,
});
const Typography = Loadable({
loader: () => import('./views/Theme/Typography'),
loading: Loading,
});
const Widgets = Loadable({
loader: () => import('./views/Widgets/Widgets'),
loading: Loading,
});
// https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
const routes = [
{ path: '/', exact: true, name: 'Home', component: DefaultLayout },
{ path: '/dashboard', name: 'Dashboard', component: Dashboard },
{ path: '/theme', exact: true, name: 'Theme', component: Colors },
{ path: '/theme/colors', name: 'Colors', component: Colors },
{ path: '/theme/typography', name: 'Typography', component: Typography },
{ path: '/base', exact: true, name: 'Base', component: Cards },
{ path: '/base/cards', name: 'Cards', component: Cards },
{ path: '/base/forms', name: 'Forms', component: Forms },
{ path: '/base/switches', name: 'Switches', component: Switches },
{ path: '/base/tables', name: 'Tables', component: Tables },
{ path: '/base/tabs', name: 'Tabs', component: Tabs },
{ path: '/base/breadcrumbs', name: 'Breadcrumbs', component: Breadcrumbs },
{ path: '/base/carousels', name: 'Carousel', component: Carousels },
{ path: '/base/collapses', name: 'Collapse', component: Collapses },
{ path: '/base/dropdowns', name: 'Dropdowns', component: Dropdowns },
{ path: '/base/jumbotrons', name: 'Jumbotrons', component: Jumbotrons },
{ path: '/base/list-groups', name: 'List Groups', component: ListGroups },
{ path: '/base/navbars', name: 'Navbars', component: Navbars },
{ path: '/base/navs', name: 'Navs', component: Navs },
{ path: '/base/paginations', name: 'Paginations', component: Paginations },
{ path: '/base/popovers', name: 'Popovers', component: Popovers },
{ path: '/base/progress-bar', name: 'Progress Bar', component: ProgressBar },
{ path: '/base/tooltips', name: 'Tooltips', component: Tooltips },
{ path: '/buttons', exact: true, name: 'Buttons', component: Buttons },
{ path: '/buttons/buttons', name: 'Buttons', component: Buttons },
{ path: '/buttons/button-dropdowns', name: 'Button Dropdowns', component: ButtonDropdowns },
{ path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups },
{ path: '/buttons/brand-buttons', name: 'Brand Buttons', component: BrandButtons },
{ path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons },
{ path: '/icons/coreui-icons', name: 'CoreUI Icons', component: CoreUIIcons },
{ path: '/icons/flags', name: 'Flags', component: Flags },
{ path: '/icons/font-awesome', name: 'Font Awesome', component: FontAwesome },
{ path: '/icons/simple-line-icons', name: 'Simple Line Icons', component: SimpleLineIcons },
{ path: '/notifications', exact: true, name: 'Notifications', component: Alerts },
{ path: '/notifications/alerts', name: 'Alerts', component: Alerts },
{ path: '/notifications/badges', name: 'Badges', component: Badges },
{ path: '/notifications/modals', name: 'Modals', component: Modals },
{ path: '/widgets', name: 'Widgets', component: Widgets },
{ path: '/charts', name: 'Charts', component: Charts },
];
export default routes;
我知道保护 App.js 中定义的路由,但是在这里它们的路由是不变的,谁能告诉我当且仅当令牌存在时如何保护路由,否则路由应该发生,否则不会发生。
解决方案
你可能已经解决了这个问题。但是如果你仍然卡住,你可以在容器文件夹内的 App.js 或 DefaultLayout 中定义保护路由。
假设您将令牌存储在 localstorage/ cookie 中,请在 Switch 块内的 DefaultLayout 中使用以下代码:
{routes.map((route, idx) => {
return route.component ? (
<Route
key={idx}
path={route.path}
exact={route.exact}
name={route.name}
render={props =>
get_token_from_storage_or_cookie("tokenName") !== null
? (
<route.component {...props} />
) : (
<Redirect to={{ pathname: "/login" }} />
)
}
/>
) : null;
})}
<Redirect from="/" to="/dashboard" />
推荐阅读
- azure - 何时使用 Azure Blob 存储与 Azure 文件共享?
- node.js - 需要代码sugg。让我的规范创建小型管理应用程序
- php - 在长结果中使用 SQL Server 数据库在 Laravel 中获取 500 错误
- svelte - 如何从组件内部调用组件的销毁?
- java - 如何在单个返回中返回布尔“if-then-else”语句
- ios - SwiftUI ZStack 对齐错误
- c++ - 如何将项目从 QListWidget 拖放到 QPlainTextEdit?
- docker - 通过docker加载postgres的命令?
- java - 如何在 Hibernate/JPA 中持久化 EnumMap?
- firebase - 将 Firebase 数据实时获取到谷歌表格中