Question

我想保护路线，并在React网站中进行角色授权和身份验证。但是我找不到快速的方法。即根据用户的角色，隐藏或显示AppBar上的不同按钮。但是除了查询数据库外，我找不到任何可以帮助我实现目标的东西。

我正在使用角色授权和身份验证来保护当前的路由，这将分别查询firebase数据库和firebase auth的角色和所分配的用户。

Answer 1

如果您使用react-router-dom，则有一个组件prop，传递给组件prop的值是用hoc包装的组件。下面是使用它的方法：-

<Route exact path="/yourpathhere" component={checkAllotedRoutes(yourComponent)} />
//In the above route component is basically a hook check.
export default function checkAllotedRoutes(Component) {
  class Permissions extends React.Component {
    static contextTypes = {
      location: PropTypes.object,
    };

    permissionAvailable = (locationKey) => {
     // see if location is there in permission array 
     return permissions.includes(locationKey);
    }

    componentWillMount() {
      this.permissionAvailable(this.props.location.key);
    }

    componentWillReceiveProps(nextProps) {
      // not 100% sure about using `locatoin.key` to distinguish between routes
      if (nextProps.location.key !== this.props.location.key) {
        this.permissionAvailable(nextProps.location.key);
      }
    }

    render() {
      return React.createElement(Component, { ...this.props });
    }
  }

  Permissions.propTypes = {
    location: PropTypes.object,
  };

  return Permissions;
}

在上面的代码中，组件是通过hoc内部传递的，我们将在其中检查权限。

如何使用Firebase作为后端保护React应用程序中的路由

1 个答案: