2

按照这个react-firestore-tutorial 和GitHub 代码。我想知道以下是否是正确的使用方法，onAuthStateChanged或者我是否理解了这个不正确的方法，如果这是正确的方法，我只是感到困惑。

CodeSandBox使用 apikey 与 Firebase 的测试帐户完全连接！！所以你可以试试我的意思，我可以学习这个。

（注意：Firebase 会阻止 Codesandbox url，即使它位于授权域中，对此感到抱歉，但您仍然可以看到代码）

t {code: "auth/too-many-requests", message: "由于异常活动，我们已阻止来自此设备的所有请求。稍后再试。", a: null}a:

请注意，这是一个仅使用的 Reactjs-Vanilla 完全成熟的高级网站；
反应 16.6
反应路由器 5
Firebase 7

在代码中，Firebase.js有 thisonAuthStateChanged及其从两个不同的组件调用，也有多次调用，据我所知，一个应该只设置一次，然后监听它的回调。多次调用它不会创建很多听众吗？

有人可以看看这段代码在 Reactjs 中处理是否正常onAuthStateChanged？(src\components\Firebase\firebase.js)

import app from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

class Firebase {
  constructor() {
    app.initializeApp(config);

   .......
  }

  .....

  onAuthUserListener = (next, fallback) =>
    this.auth.onAuthStateChanged(authUser => {
      if (authUser) {
        this.user(authUser.uid)
          .get()
          .then(snapshot => {
            const dbUser = snapshot.data();

            // default empty roles
            if (!dbUser.roles) {
              dbUser.roles = {};
            }

            // merge auth and db user
            authUser = {
              uid: authUser.uid,
              email: authUser.email,
              emailVerified: authUser.emailVerified,
              providerData: authUser.providerData,
              ...dbUser,
            };

            next(authUser);
          });
      } else {
        fallback();
      }
    });

  user = uid => this.db.doc(`users/${uid}`);

}

export default Firebase;

这两个矩形高阶组件：

首先withAuthentication：（src\components\Session\withAuthentication.js）

import React from 'react';

import AuthUserContext from './context';
import { withFirebase } from '../Firebase';

const withAuthentication = Component => {
  class WithAuthentication extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        authUser: JSON.parse(localStorage.getItem('authUser')),
      };
    }

    componentDidMount() {
      this.listener = this.props.firebase.onAuthUserListener(
        authUser => {
          localStorage.setItem('authUser', JSON.stringify(authUser));
          this.setState({ authUser });
        },
        () => {
          localStorage.removeItem('authUser');
          this.setState({ authUser: null });
        },
      );
    }

    componentWillUnmount() {
      this.listener();
    }

    render() {
      return (
        <AuthUserContext.Provider value={this.state.authUser}>
          <Component {...this.props} />
        </AuthUserContext.Provider>
      );
    }
  }

  return withFirebase(WithAuthentication);
};

export default withAuthentication;

并且withAuthorization：（src\components\Session\withAuthorization.js）

import React from 'react';
    import { withRouter } from 'react-router-dom';
    import { compose } from 'recompose';
    
    import AuthUserContext from './context';
    import { withFirebase } from '../Firebase';
    import * as ROUTES from '../../constants/routes';
    
    const withAuthorization = condition => Component => {
      class WithAuthorization extends React.Component {
        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;
4

1 回答 1

1

这个是正常的。onAuthStateChanged如果登录成功，则接收一个观察者函数，否则将传递一个用户对象。

作者包装onAuthStateChanged了一个高阶函数—— onAuthUserListener. HOF 接收两个参数作为函数，next和fallback。这两个参数是创建 HOCwithAuthentication和withAuthorization.

前者的next参数是一个在localStorage上存储用户数据的函数

localStorage.setItem('authUser', JSON.stringify(authUser));
this.setState({ authUser });

而后者的next参数根据条件重定向到新路由。

if (!condition(authUser)) {
  this.props.history.push(ROUTES.SIGN_IN);
}

所以，我们只是根据不同的需求传递不同的观察者函数。我们将包装 HOC 的组件将在实例化时获得它们各自的观察者函数。观察者函数根据身份验证状态更改事件提供不同的功能。因此，要回答您的问题，这是完全有效的。

参考：

  1. https://firebase.google.com/docs/reference/js/firebase.auth.Auth#onauthstatechanged
  2. https://reactjs.org/docs/higher-order-components.html
于 2020-10-21T10:48:16.727 回答