本文介绍了用户未登录时重定向的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在 App.js 中有以下路由
<div className="应用程序"><布局><路由精确路径=/"精确组件={Main}/><路由精确路径="/passwordchange/:email" component={PasswordChange}/><路由精确路径="/account" component={Account}/><路由精确路径="/forgot-password" component={ForgotPassword}/><路由精确路径="/login" component={Login}/><路由精确路径="/faq" component={FAQ}/><路由精确路径="/library" component={Library}/><路由精确路径="/signup" component={SignUp}/><路由精确路径="/signup/:id" component={SignUp}/><路由精确路径="/login/:id" component={Login}/><Route path="/books" 精确组件={BookSummaries}/><Route path="/home" 精确组件={Main}/><Route path="/pricing" 精确组件={Pricing}/><Route path="/books/:id" 精确组件={BookDetail}/><Route path="/categories/:id" 精确组件={Categories}/><Route path="/category/:category" 精确组件={BookListPage}/><Route path="/stacksocial" 精确组件={StackSocial}/><Route path="/booklist/:sort" 精确组件={BookListPage}/><Route path="/reader/:id" 精确组件={Reader}/><Route path="/search" 精确组件={BookSearch}/><Route path="/payment/:planid" 精确组件={Payment}/></布局>
</路由器>
对于某些路由,我只想在用户登录时才显示它们.使用 React 做到这一点的最佳方法是什么?
解决方案
最好的方法是创建一个 ProtectedRoute
组件.如果用户未登录,请将其重定向到其他位置,例如登录页面.
这里是 ProtectedRoute.js(这里我有一个 authService
来决定用户是否登录;你的可以不同).
从react"导入React;从react-router-dom"导入{路由,重定向};从../../services/auth-service"导入authService;出口 const ProtectedRoute = ({小路,组件:组件,使成为,...休息}) =>{返回 (<路线路径={路径}{...休息}渲染={道具=>{如果(authService.isAuthenticated()){返回组件 ?<组件{...道具}/>:渲染(道具);} 别的 {return <Redirect to="/login"/>;}}}/>);};导出默认的 ProtectedRoute;
这样您就可以将此组件用于需要身份验证的路由.
<div className="应用程序"><布局><路由精确路径=/"精确组件={Main}/><ProtectedRoute 精确路径="/passwordchange/:email" component={PasswordChange}/></布局>
I have the following routes in 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>
For some of the routes, I want to only show them if the user is logged in. What's the best way to do that using React?
解决方案
The best way to do it is by creating a ProtectedRoute
component. If the user is not logged in, redirect them to somewhere else such as the login page.
Here is ProtectedRoute.js (here I have an authService
to decide if the user is logged in or not; yours can be different).
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;
This way you can use this component for the routes that require authentication.
<Router>
<div className="App">
<Layout>
<Route exact path="/" exact component={Main} />
<ProtectedRoute exact path="/passwordchange/:email" component={PasswordChange} />
</Layout>
</div>
这篇关于用户未登录时重定向的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!