我在 App.js 中有以下路线
<Router>
<div className="App">
<Layout>
<Route exact path="/" exact component={Main} />
<Route exact path="/passwordchange/:email" component={PasswordChange} />
<Route exact path="/account" component={Account} />
<Route exact path="/forgot-password" component={ForgotPassword} />
<Route exact path="/login" component={Login} />
<Route exact path="/faq" component={FAQ} />
<Route exact path="/library" component={Library} />
<Route exact path="/signup" component={SignUp} />
<Route exact path="/signup/:id" component={SignUp} />
<Route exact path="/login/:id" component={Login} />
<Route path="/books" exact component={BookSummaries} />
<Route path="/home" exact component={Main} />
<Route path="/pricing" exact component={Pricing} />
<Route path="/books/:id" exact component={BookDetail} />
<Route path="/categories/:id" exact component={Categories} />
<Route path="/category/:category" exact component={BookListPage} />
<Route path="/stacksocial" exact component={StackSocial} />
<Route path="/booklist/:sort" exact component={BookListPage} />
<Route path="/reader/:id" exact component={Reader} />
<Route path="/search" exact component={BookSearch} />
<Route path="/payment/:planid" exact component={Payment} />
</Layout>
</div>
</Router>
对于某些路由,我只想在用户登录时显示它们。使用 React 实现此目的的最佳方法是什么?
最好的方法是创建一个ProtectedRoute
成分。如果用户未登录,请将其重定向到其他位置,例如登录页面。
这是 ProtectedRoute.js (这里我有一个authService
决定用户是否登录;你的可能会有所不同)。
import React from "react";
import { Route, Redirect } from "react-router-dom";
import authService from "../../services/auth-service";
export const ProtectedRoute = ({
path,
component: Component,
render,
...rest
}) => {
return (
<Route
path={path}
{...rest}
render={props => {
if (authService.isAuthenticated()) {
return Component ? <Component {...props} /> : render(props);
} else {
return <Redirect to="/login" />;
}
}}
/>
);
};
export default ProtectedRoute;
这样您就可以将此组件用于需要身份验证的路由。
<Router>
<div className="App">
<Layout>
<Route exact path="/" exact component={Main} />
<ProtectedRoute exact path="/passwordchange/:email" component={PasswordChange} />
</Layout>
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)