Reactjs 如何在呈现页面之前检查用户是否经过身份验证？

我将Next.js与redux和firebase auth一起使用

我试图实现的是在能够访问一些私有页面之前检查用户是否已登录

我已经创建了一个名为

AdminLayout

的组件，它被包装在每个私有页面上。我使用

mapStateToProps

获取

currentUser

作为道具，但在第一次运行时没有获取值

// admin-layout.component.jsx
// Imports

class AdminLayout extends React.Component {
  componentDidMount() {
    console.log(this.props.currentUser);
    // if (this.props.currentUser) {
    //   if (this.props.currentUser.currentUser.role != "admin") {
    //     Router.push("/admin/login");
    //   }
    // }
    // if (!this.props.currentUser) {
    //   Router.push("/admin/login");
    // }
  }

  render() {
    return (
      <React.Fragment>
            // Irrelevant code here
            {this.props.children}
            // Irrelevant code here
      </React.Fragment>
    );
  }
}

const mapStateToProps = (state) => ({
  currentUser: state.user.currentUser,
});

export default connect(mapStateToProps)(AdminLayout);

//admin-layout.component.jsx
//进口
类AdminLayout扩展了React.Component{
componentDidMount（）{
console.log（this.props.currentUser）；
//if（this.props.currentUser）{
//if（this.props.currentUser.currentUser.role！=“admin”）{
//Router.push（“/admin/login”）；
//   }
// }
//如果（！this.props.currentUser）{
//Router.push（“/admin/login”）；
// }
}
render（）{
返回(
//不相关的代码在这里
{this.props.children}
//不相关的代码在这里
);
}
}
常量mapStateToProps=（状态）=>({
currentUser:state.user.currentUser，
});
导出默认连接（MapStateTops）（AdminLayout）；

---

有没有办法克服这种情况，只允许经过身份验证的用户访问私人页面？

但是我使用的是Next.js，所以我不使用react路由器domOk。然后，您可以创建一个用于检查并继续或重定向或执行每个操作的。