Реагируйте с Firebase - разделение авторизации между действиями CRUD

Question

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

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

В на данный момент у меня есть список ссылок, который является индексом всех созданных ссылок. Внизу этого списка у меня есть компонент AddReference, который является ссылкой на форму для создания новой ссылки.

Список не упакован в мою оболочку withAuthorisation. Компонент AddReference обернут.

Я ожидаю выхода из системы и отображения списка для всех пользователей - (каждый может прочитать индекс), но зарегистрированный пользователь не должен видеть ссылку AddReference.

Вместо этого весь список заблокирован за перенаправлением аутентификации.

Мой список всех ссылок содержит:

import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import { compose } from 'recompose';
import { withFirebase } from '../../Firebase/Index';
import * as ROUTES from '../../../constants/Routes';
import { ReferencesList } from './ReferencesList';
import {  Layout, Typography, Card, List, Button, Divider } from 'antd';
import {ReferencesForm} from './Form';
import AddReference from './AddReference';

const { Content } = Layout 
const { Title, Paragraph, Text } = Typography;


class ReferencesPage extends Component {

  render() {
    return (
      <div>
          <Content
            style={{
              background: '#fff',
              padding: 24,
              margin: "auto",
              minHeight: 280,
              width: '90%'
            }}
          >
            <ReferencesList/>
            <br/>
            <AddReference />
          </Content>

      </div>
    );
  }
}

export default ReferencesPage;

Мой компонент AddReference имеет:

import React, { Component } from 'react';
import { Link, withRouter } from 'react-router-dom';
import { compose } from 'recompose';
import { withFirebase } from '../../Firebase/Index';
import * as ROUTES from '../../../constants/Routes';
import { ReferencesList } from './ReferencesList';
import {  Layout, Typography, Card, List, Button, Divider } from 'antd';
import {ReferencesForm} from './Form';
import { AuthUserContext, withAuthorization, withEmailVerification } from '../../Session/Index';


const { Content } = Layout 
const { Title, Paragraph, Text } = Typography;


const AddReference = () => (

<AuthUserContext.Consumer>
    {authUser => (


        <div>

                <Divider></Divider>
                <div style={{
                display: "flex",
                justifyContent: "center"
                }}>
                <Link to={ROUTES.REFERENCESFORM}>Add a Reference</Link>
                </div>



        </div>

)}
</AuthUserContext.Consumer>
);


const condition = authUser => !!authUser;
export default compose(
// withEmailVerification,
withAuthorization(condition),
)(AddReference);

Моя оболочка withAuthorisation имеет:

import React from 'react';
import { withRouter } from 'react-router-dom';
import { compose } from 'recompose';
import { withFirebase } from '../Firebase/Index';
import AuthUserContext from './Context';
import * as ROUTES from '../../constants/Routes';


const withAuthorization = condition => Component => {
  class WithAuthorization extends React.Component {
    // componentDidMount() {
    //   this.listener = 
this.props.firebase.auth.onAuthStateChanged(authUser => {
    //     if (!condition(authUser)) {
    //       this.props.history.push(ROUTES.SIGN_IN);
    //     }
    //   });
    // }
    componentDidMount() {
      this.listener = this.props.firebase.onAuthUserListener(
        authUser => {
          if (!condition(authUser)) {
            this.props.history.push(ROUTES.SIGN_IN);
          }
        },
        () => this.props.history.push(ROUTES.SIGN_IN),
      );
    }
    componentWillUnmount() {
      this.listener();
    }
    render() {
      return (
        <AuthUserContext.Consumer>
          {authUser =>
            condition(authUser) ? <Component {...this.props} /> : null
          }
        </AuthUserContext.Consumer>
      );
    }
  }
  return compose(
    withRouter,
    withFirebase,
  )(WithAuthorization);
};
export default withAuthorization;

Возможно ли иметь компонент, который обернут внутри требования авторизации, на странице, которая не обернута? Я все еще хочу показать содержимое списка (кроме компонента AddReference) для пользователей, которые не удовлетворяют условию авторизации.

Answer 1

1> как реализовать разрешения оптимизированным способом?

Ответ:

Лучший практика для пользовательских ролей React Router (Firebase)

Управление доступом на основе ролей (RBA C) и React Apps .

2> Возможно ли иметь компонент, который обернут внутри требования авторизации, на странице, которая не обернута? Я все еще хочу показать содержимое списка (кроме компонента AddReference) для пользователей, которые не удовлетворяют условию авторизации.

Краткий ответ: Да, сделать страницу доступной для всех пользователей и скрыть содержимое страницы, которое не должно быть видно публике c.

Ответ: Что ж, нам нужно глобальное состояние ( REDUX , localStorage , et c), в котором мы будем хранить роли пользователей (guest, login et c) во время инициализации. затем, когда нам нужно скрыть элемент от компонента, мы просто должны проверить значение, как показано ниже

//set state.userRole from globalState in init function.
(this.state.userRole == 'login') ?
<Icon name='md-log-out' style={styles.logoutIcon} button onPress={() =>
            Alert.alert(
                'Log out',
                'Do you want to logout?',
                [
                    { text: 'Cancel', onPress: () => { return null } },
                    {
                        text: 'Confirm', onPress: () => {this.logout()}
                    },
                ],
                { cancelable: false }
            )
        }/>
        :
        <View />;