Есть ли способ защитить URL на основе ролей Firebase?

Question

Я пытаюсь ограничить 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);

, и я могу получить роль пользователя, как это, потому что мне пришлось делать при навигации, чтобы визуализировать различные navBar на основе ролей

   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, если да, он проверяет, если япросим, ​​чтобы этот компонент был защищен ролью администратора или учителя, и я проверяю его

с этим кодом, он работает