javascript - 有没有办法根据 firebase Angular 色保护 url？

Question

我正在尝试根据登录用户的 Angular 色来限制 url，我有以下 HOC 可以做到这一点

const withAuthorization = (authCondition) => (Component) => {
class WithAuthorization extends React.Component {
componentDidMount() {
  firebase.auth.onAuthStateChanged(authUser => {
    if (!authCondition(authUser)) {
      this.props.history.push(routes.SIGN_IN);
    }
  });
}

render() {
  return (
    <AuthUserContext.Consumer>
      {authUser => authUser ? <Component {...this.props} /> : null}
    </AuthUserContext.Consumer>
  );
  }
}

return withRouter(WithAuthorization);
}

export default withAuthorization;

使用以下代码限制 url，如果用户被烧毁，它就可以工作

const authCondition = (authUser) => !!authUser
export default withAuthorization(authCondition)(Account);

我可以像这样获得用户 Angular 色，因为我必须在导航时根据 Angular 色呈现不同的导航栏

   authUser.getIdTokenResult(true) 
  .then((idTokenResult) => {
      if (!!idTokenResult.claims.student) //here I check if it is a student

问题是我现在如何混合这些东西以将 userRole 传递给条件？

Answer 1

我现在更改了我的 HOC 以接收另一个属性，并更改了它使用此代码的方式

const withAuthorization = (authCondition, neededRole) => (Component) => {
class WithAuthorization extends React.Component {
  componentDidMount() {
    firebase.auth.onAuthStateChanged(authUser => {
      if (!authCondition(authUser)) {
        this.props.history.push(routes.SIGN_IN);
      }
      else if(neededRole=="ADMIN") {
        authUser.getIdTokenResult(true) 
        .then((idTokenResult) => {
            if(!idTokenResult.claims.admin){
               this.props.history.push(routes.SIGN_IN);
              }
            })
          }
        else if(neededRole=="TEACHER") {
          authUser.getIdTokenResult(true) 
          .then((idTokenResult) => {
              if(!idTokenResult.claims.teacher && !idTokenResult.claims.admin){ //No teacher or admin
                 this.props.history.push(routes.SIGN_IN);
                }
              })
            }
    });
  }

render() {
  return (
    <AuthUserContext.Consumer>
      {authUser => authUser ? <Component {...this.props} /> : null}
    </AuthUserContext.Consumer>
    );
  }
}

return withRouter(WithAuthorization);
}

export default withAuthorization;

现在我的 HOC 首先检查主要条件是否返回 true，如果是，它会检查我是否要求该组件由 Angular 色 Admin 或 Teacher 保护，然后我检查它

用这段代码就可以了