Question

我正在开发一个React应用，其中用户需要登录才能执行任何操作。这意味着默认情况下，每条路由都需要身份验证，需要创建帐户所需的页面很少，依此类推。

我在该主题（How to implement authenticated routes in React Router 4?）上找到的每篇文章或教程都说明了如何将所有私有页面置于一条路线（通常是“ dashboard /”）的后面。但是我不想人为地强迫我的应用程序具有这种路由结构。当我以前使用AngularJS时，我将为每个路由指定是否需要认证用户或不访问它。

那么，构造路由器的最佳方式是做出反应，以指定一些路由可公开访问，而其他路由则需要身份验证，如果不是，则将您重定向到登录页面？

Answer 1

基本上，您可以创建一个高阶组件，该组件可用于检查身份验证并执行必要的操作...我对受保护的路由执行以下操作：

export const PrivateRoute = ({ component: Component, ...rest }) => {

 return (
    <Route
      {...rest}
      render={(props) =>
        checkAuth(user) === true ? (
          <Component {...props} />
        ) : (
          <Redirect to="/auth/login" />
        )
      }
    />
  );
};

有几种方法可以传递您的用户对象...因此我没有在其中放置它

然后在我的路由器中按如下方式使用它：

<PrivateRoute
        exact
        path="/application/version"
        component={AppVersion}
      />

Answer 2

我同意该解决方案包含高阶组件，这是另一个示例，它可以避免在每条路线上询问，并提供了一种更通用的方法来私有页面

您有一个包装器组件：withAuthorization，用于包装该组件以检查您是否有权访问该内容。

这只是一个简单的示例，希望它可以为您提供帮助

const withAuthorization = Component => {
 return class WithAuthorization extends React.Component {
  constructor(props){
   super(props);
   this.state = {
    auth: false
   }
  }

 async componentDidMount() {
  // ask in your api for the authorization
  // if user has authorization
  this.setState({ auth: true })
 }

render () {
 const { auth } = this.state;
  return (
   {auth ? <Component {...this.props} /> : <Redirect to={`login`} />}
   )
  }
 }
}

export default withAuthorization;

然后，当您导出组件时，只需采用以下方式即可：

withAuthorization(ComponentToExport)

如何构建只有几个公共路线的React应用程序？

2 个答案: