Question

我正在开发使用firebase的next.js应用程序。我需要使用firebase auth程序包来限制对页面的访问。 with-firebase-authentication示例不显示对多个页面的身份验证。

import React from 'react';
import Router from 'next/router';

import { firebase } from '../../firebase';
import * as routes from '../../constants/routes';

const withAuthorization = (needsAuthorization) => (Component) => {
  class WithAuthorization extends React.Component {
    componentDidMount() {
      firebase.auth.onAuthStateChanged(authUser => {
        if (!authUser && needsAuthorization) {
          Router.push(routes.SIGN_IN)
        }
      });
    }

    render() {
      return (
        <Component { ...this.props } />
      );
    }
  }

  return WithAuthorization;
}

export default withAuthorization;

Answer 1

您好，经过here的研究，似乎有两种方法可以做到这一点。您可以使用Custom 替换页面的初始化过程以在其中包含身份验证-在这种情况下，您可以将身份验证状态作为prop传输到下一页-或者您会为每次加载的页面要求一个新的身份验证状态。

Answer 2

这是一个React Firebase Authentication的示例，但它也应与next.js一起使用。

主要思想是创建一个高级组件，该组件检查用户是否已通过身份验证，并将所有页面包装在其中：

import React from 'react';

const withAuthentication = Component => {
  class WithAuthentication extends React.Component {
    render() {
      return <Component {...this.props} />;
    }
  }

  return WithAuthentication;
};

export default withAuthentication;

您可以覆盖_app.js，仅在用户通过身份验证后才返回<Component {...pageProps} />。

您可以执行以下操作：

const withAuthorization = (needsAuthorization) => (Component) => {
  class WithAuthorization extends React.Component {
    state = { authenticated: null }
    componentDidMount() {
      firebase.auth.onAuthStateChanged(authUser => {
        if (!authUser && needsAuthorization) {
          Router.push(routes.SIGN_IN)
        } else {
          // authenticated
          this.setState({ authenticated: true })
        }
      });
    }

    render() {
      if (!this.state.authenticated) {
        return 'Loading...'
      }
      return (
        <Component { ...this.props } />
      );
    }
  }

  return WithAuthorization;
}

最好是在服务器上进行处理。

Answer 3

还努力集成Firebase身份验证，最终使用了nextjs的with-iron-session示例中详述的方法：https://github.com/hajola/with-firebase-auth-iron-session

如何使用Firebase身份验证来限制对next.js页面的访问？

3 个答案: