如何在管理面板中使用受保护的路由

Question

我正在为管理面板使用react主题。我添加了一个登录页面，我想创建一个受保护的路由。Index.js有两个路由，但在管理面板中有更多的路由。我以前没有做过一个保护路由到管理面板，所以我真的很挣扎。现在，我只能从登录页面查看重定向。我不想在没有令牌的情况下访问其他路由。

index.js:

import ReactDOM from "react-dom";
// import indexRoutes from "./routes/index.jsx";
import { BrowserRouter, Redirect, Route, Switch, useLocation } from "react-router-dom";
import Login from "./layouts/Login/Login";
import FullLayout from "./layouts/fulllayout.jsx";
import "./assets/scss/style.css";
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route exact path="/login" component={Login} />
{localStorage.token?.length > 500 ? <Route path="/" component={FullLayout} /> :  <Redirect from="/dashboard" to="/login"/>}
</Switch>
</BrowserRouter>,
document.getElementById("root")
);

FullLayout.js:

import React, { useState, useEffect } from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import Header from "../components/header/header.jsx";
import Sidebar from "../components/sidebar/sidebar.jsx";
import Footer from "../components/footer/footer.jsx";
import ThemeRoutes from "../routes/routing.jsx";
const FullLayout = (props) => {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => {
const updateDimensions = () => {
let element = document.getElementById("main-wrapper");
setWidth(window.innerWidth);
if (width < 1170) {
element.setAttribute("data-sidebartype", "mini-sidebar");
element.classList.add("mini-sidebar");
} else {
element.setAttribute("data-sidebartype", "full");
element.classList.remove("mini-sidebar");
}
};
if (document.readyState === "complete") {
updateDimensions();
}
window.addEventListener("resize", updateDimensions.bind(this));
window.addEventListener("load", updateDimensions.bind(this));
return () => {
window.removeEventListener("load", updateDimensions.bind(this));
window.removeEventListener("resize", updateDimensions.bind(this));
};
}, [width]);
return (
<div
id="main-wrapper"
data-theme="light"
data-layout="vertical"
data-sidebartype="full"
data-sidebar-position="fixed"
data-header-position="fixed"
data-boxed-layout="full"
>
<Header />
<Sidebar {...props} routes={ThemeRoutes} />
<div className="page-wrapper d-block">
<div className="page-content container-fluid">
<Switch>
{ThemeRoutes.map((prop, key) => {
if (prop.redirect) {
return <Redirect from={prop.path} to={prop.pathTo} key={key} />;
} else {
return (
<Route
exact
path={prop.path}
component={prop.component}
key={key}
/>
);
}
})}
</Switch>
</div>
<Footer />
</div>
</div>
);
};
export default FullLayout;

routing.js:

// ui components
import Alerts from '../views/ui-components/alert.jsx';
import Badges from '../views/ui-components/badge.jsx';
import Buttons from '../views/ui-components/button.jsx';
import Cards from '../views/ui-components/cards.jsx';
import LayoutComponent from '../views/ui-components/layout.jsx';
import PaginationComponent from '../views/ui-components/pagination.jsx';
import PopoverComponent from '../views/ui-components/popover.jsx';
import TooltipComponent from '../views/ui-components/tooltip.jsx';
const ThemeRoutes = [
{ 
path: '/dashboard', 
name: 'Dashboard', 
icon: 'mdi mdi-gauge', 
component: Starter 
},
{
path: '/alert',
name: 'Alerts',
icon: 'mdi mdi-comment-processing-outline',
component: Alerts
},
{
path: '/badge',
name: 'Badges',
icon: 'mdi mdi-arrange-send-backward',
component: Badges
},
{
path: '/button',
name: 'Buttons',
icon: 'mdi mdi-toggle-switch',
component: Buttons
},
{
path: '/card',
name: 'Cards',
icon: 'mdi mdi-credit-card-multiple',
component: Cards
},
{
path: '/grid',
name: 'Grid',
icon: 'mdi mdi-apps',
component: LayoutComponent
},
{
path: '/pagination',
name: 'Pagination',
icon: 'mdi mdi-priority-high',
component: PaginationComponent
},
{
path: '/popover',
name: 'Popover',
icon: 'mdi mdi-pencil-circle',
component: PopoverComponent
},
{
path: '/ui-components/tooltip',
name: 'Toltips',
icon: 'mdi mdi-image-filter-vintage',
component: TooltipComponent
},
{ path: '/', pathTo: '/dashboard', name: 'Dashboard', redirect: true }
];
export default ThemeRoutes;

Answer 1

在您的完整布局中尝试这个

{ThemeRoutes.map((route, key) => {
return route.component? (
<Route
key={key}
path={route.path}
name={route.name}
render={props => (
localStorage.getItem("token") ? (
<CFade><route.component {...props} /></CFade>
):(
<Redirect to={{pathname: "/login"}} />
)
)} />
):null
})}