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

问题描述 投票:4回答:3

我正在开发使用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;
firebase firebase-authentication next.js
3个回答
1
投票

这是一个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;
}

最好是在服务器上处理此问题。


0
投票

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


0
投票

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

热门问题
推荐问题
最新问题