如何使用 firebase auth 限制对 next.js 中页面的访问？

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

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