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

15 浏览
0 Comments

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

在一个React单页应用中，我在/src/pages/文件夹下有一个“页面”集合。

入口页面是/src/文件夹下的index.js文件，我在这里定义了一个路由常量，如下所示：

const routing = (
  
      
        
        
        
        
        
        
      
  
)

它运行得很好。所有页面都可以通过类似"https://mysuperapp.com/page2"的方式进行导航，并且会渲染Page2 React组件。

当我加入用户会话管理（登录、退出登录）时，问题就出现了。如果用户没有登录应用程序，所有页面都应自动重定向到/signIn页面。反之，如果用户已经登录，访问/signIn页面时，应自动重定向到根首页。

目前，我通过在所有页面中，在组件中声明render()方法之后添加以下代码来实现这一点，如下所示：

class Page2 extends React.Component {
  render() {
    if (UserProfile.getUserSessionStatus() !== "logged") {
      this.props.history.push("/signIn");
    }
  }
  return (
    在此处渲染JSX代码...
    ...

这样可以工作，但感觉像是一个刚开始学习React的人使用的廉价解决方法，而不是一个专业人士使用的。

对于一个概念验证来说，它是有效的，但我绝不敢在生产环境中使用这样的东西。

那么，正确的、符合最佳实践的方法是什么呢？

0

1 答案

0 Comments

React路由在用户未登录时重定向的正确方法是创建一个高阶组件（Higher Order component，HOC）并将其用于保护需要登录的任何路由。

const PrivateRoute = ({ component: Component, ...rest }) => (
   (
    UserProfile.getUserSessionStatus() === "logged"
      ? 
      : 
  )} />
)

然后像这样使用：

...

...

希望这对您有所帮助！

0