Как ограничить доступ к страницам в next.js, используя firebase auth? - PullRequest
Новая
       13

Как ограничить доступ к страницам в next.js, используя firebase auth?

0 голосов
/ 04 февраля 2019

Я работаю над приложением next.js, которое использует firebase.Мне нужно использовать пакет аутентификации firebase, чтобы ограничить доступ к страницам.В примере 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;

Ответы [ 2 ]

0 голосов
/ 05 февраля 2019

Это пример 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 голосов
/ 05 февраля 2019

Привет после некоторого исследования здесь , кажется, есть два способа сделать это.Либо вы чередуете процесс инициализации страницы, используя Custom , чтобы включить там аутентификацию - в этом случае вы можете перенести состояние аутентификации в качестве реквизита на следующую страницу - или вы запросите новое состояние аутентификации для каждой страницынагрузка.

...