Как я могу защитить маршруты в реагирующем приложении, используя Firebase в качестве бэкэнда

Question

Я хочу защитить маршруты и выполнить авторизацию ролей и аутентификацию на реагирующем веб-сайте.Но я не мог найти быстрый способ сделать это.Т.е. разные кнопки на панели приложений скрыты или показаны в зависимости от роли пользователя.Но я не смог найти ничего, что могло бы помочь мне достичь этого, кроме запросов к базе данных.

Я защищаю маршруты в настоящее время, используя авторизацию ролей и аутентификацию, которая запрашивает базу данных firebase и аутентификацию firebase для ролей.и назначенный пользователь соответственно.

Answer 1

Если вы используетеact-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, где мы будем проверять разрешение.