javascript - 当用户未登录到应用程序时，使用 React 路由重定向的正确方法是什么？

Question

在 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 的人使用，而不是由专业人士使用。

为了概念证明它是有效的，但我绝不敢在生产环境中使用这样的东西。

那么，实现这一目标的正确、符合最佳实践的方法是什么？

Answer 1

一种可能的方法是创建一个高阶组件 (HOC) 并使用它来保护任何需要登录的路由。

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    UserProfile.getUserSessionStatus() === "logged"
      ? <Component {...props} />
      : <Redirect to='/login' />
  )} />
)

然后像这样使用

.....
<PrivateRoute path='/page1' component={Page1} />
.......

希望这对您有所帮助!