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

Posted 2023-03-06

【中文标题】如何使用firebase auth限制对next.js中页面的访问？

【英文标题】：How to restrict access to pages in next.js using firebase auth?

【发布时间】：2019-06-28 14:09:44

【问题描述】：

我正在开发一个使用 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;

【参考方案1】：

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

【参考方案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;

最好在服务器上处理。

【讨论】：

我已将问题修改为我找到的解决方案，但页面仅在呈现所述页面内容后才会重定向..

我应该将 HOC 添加到页面组件吗？？？？我尝试了与您在上面所做的类似的操作，但它会呈现然后重定向..

【参考方案3】：

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