javascript - React with Firebase - 在 CRUD 操作之间分割授权

Question

我正在尝试使用 React 和 Firebase 来制作一个应用程序，允许所有用户读取所有内容，并允许某些用户写入某些函数。

目前，我的 Firestore 安全规则设置为允许所有用户读取和写入所有内容，然后我有一个 withAuthorization 包装器，我想将其放置在一个组件周围，该组件包含一个用于编写新文档的链接。我知道这并不安全，但我只是想掌握如何分离代码的窍门，以便我可以构建根据我编写的权限呈现内容的 View 层。

目前我有一个引用列表，它是创建的所有引用的索引。在该列表的底部，我有一个名为“AddReference”的组件，它是一个指向表单的链接，用于创建新的引用。

该列表未包装在我的 withAuthorization 包装器中。 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);

我的 withAuthorization 包装器有:

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>如何优化实现权限？

答案:

Best practice for React Router user roles (Firebase)

Role-Based Access Control (RBAC) and React Apps .

2> 是否可以将组件封装在未封装的页面上呈现的授权要求内？我仍然想为不满足授权条件的用户显示列表的内容(除了 AddReference 组件)。

简短回答:是的，让所有用户都可以访问该页面，并隐藏不应该对公众可见的页面内容。

答案:嗯，我们需要有一个全局状态(REDUX、localStorage等)，我们将在其中存储用户 Angular 色( guest 、登录等)在初始化时。那么当我们需要从组件中隐藏元素时，我们只需检查如下所示的值

//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 />;