javascript - 有没有办法根据 firebase 角色保护 url?

标签 javascript reactjs firebase firebase-authentication

我正在尝试根据登录用户的 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 传递给条件?

最佳答案

我现在更改了我的 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 保护,然后我检查它

用这段代码就可以了

关于javascript - 有没有办法根据 firebase 角色保护 url?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52031918/

相关文章:

ios - 我们如何将数据写入 firebase 实时数据库?尽管启用了读/写,但似乎不起作用

Javascript - 检测互联网速度/带宽

javascript - 将回调添加到动画队列 - jQuery

javascript - 修改 javascript 代码,使其在 iframe 中获取当前选定的文本

javascript - 使用 Mongoose 进行动态查询

javascript - 如何使用 JSX 作为 Google Maps API 中 InfoWindow 的内容?

javascript - 如何在 react 应用程序中重新加载页面(状态)

javascript - 如何更改重新图表中水平线之间的高度?

swift - typealias swift 的问题

javascript - Firebase 数据库无效路径错误