在 React SPA 中,我在/src/pages/文件夹下有一组“页面”。
入口点page是/src/文件夹下的一个index.js文件,我在里面定义了一个router const是这样的:
const routing = (
<Router>
<div>
<Switch>
<Route path="/signIn" component={SignIn} />
<Route exact path="/" component={Homepage} />
<Route path="/page1" component={Page1} />
<Route path="/page2" component={Page2} />
<Route path="/page3" component={Page3} />
<Route component={NotFound} />
</Switch>
</div>
</Router>
它非常好用。所有页面都可以像“https://mysuperapp.com/page2”一样导航,它将呈现 Page2 React 组件。
当我合并用户 session 管理(登录、注销)时会出现问题。如果用户未登录应用程序,所有页面 应自动重定向到/signIn 页面。反之亦然,如果用户已经登录,如果访问/signIn 页面,它应该自动重定向到根主页。
现在我已经通过在组件中声明 render() 方法之后向 所有 页面 添加以下代码来实现此功能,如下所示:
class Page2 extends React.Component {
render() {
if (UserProfile.getUserSessionStatus() !== "logged") {
this.props.history.push("/signIn");
}
}
return (
JSX code to be rendered here...
...
这行得通,但感觉像是一种廉价的变通方法,供刚刚学习 React 的人使用,而不是由专业人士使用。
为了概念证明它是有效的,但我绝不敢在生产环境中使用这样的东西。
那么,实现这一目标的正确、符合最佳实践的方法是什么?
最佳答案
一种可能的方法是创建一个高阶组件 (HOC) 并使用它来保护任何需要登录的路由。
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={(props) => (
UserProfile.getUserSessionStatus() === "logged"
? <Component {...props} />
: <Redirect to='/login' />
)} />
)
然后像这样使用
.....
<PrivateRoute path='/page1' component={Page1} />
.......
希望这对您有所帮助!
关于javascript - 当用户未登录到应用程序时,使用 React 路由重定向的正确方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54723286/