使用 Firebase 保护路由

Question

我在 Next.js 应用程序中使用 Firebase 进行用户身份验证。我想保护客户端的用户。我使用 firebase firebaseui react-firebaseUI 来实现 Google Auth。如何在客户端本身保护路由

  const uiConfig = {
    signInFlow: "popup",
    signInSuccessUrl: "/dashboard",
    signInOptions: [firebase.auth.GoogleAuthProvider.PROVIDER_ID],
  }

我想保护仪表板路线。提前致谢:)

Answer 1

路由器：

首先，您需要维护一个包含所有 public 和受保护路由的路由器。


import React from 'react';

import {
  Route,
  Switch,
  BrowserRouter,
} from 'react-router-dom';

import ProtectedRoute from './Protected';

import Foo from './Foo';
import Bar from './Bar';

const Routes = () => (
  <BrowserRouter>
    <Switch>
      // public route
      <Route exact path="/foo" component={Foo} />

      // protected route
      <ProtectedRoute exact path="/bar" component={Bar} />

      // if user hits a URL apart from the above ones, render a 404 component
      <Route path="*" component={NotFound} />
    </Switch>
  </BrowserRouter>
);

export default Routes;

受保护的路线：

这是保护路由，如果允许用户根据其授权状态访问您应用上的保护页面，将处理该路由。

import React from 'react';

import { useAuthStatus } from '../hooks';

import Spinner from '../Spinner';
import UnAuthorised from '../UnAuthorised';

const ProtectedRoute = ({ component: Component }) => {
  // a custom hook to keep track of user's auth status
  const { loggedIn, checkingStatus } = useAuthStatus();

  return (
    <>
      {
        // display a spinner while auth status being checked
        checkingStatus
          ? <Spinner />
          : loggedIn
            // if user is logged in, grant the access to the route
            // note: in this example component is Bar
            ? <Component />
            // else render an unauthorised component
            // stating the reason why it cannot access the route
            : <UnAuthorised />
      }
    </>
  );
};

export default ProtectedRoute;

Firebase 身份验证状态：

好吧，这是跟踪用户登录和注销的自定义挂钩。


import { useEffect, useState } from 'react';

import { firebase } from '../config';

export const useAuthListener = (): void => {
  // assume user to be logged out
  const [loggedIn, setLoggedIn] = useState(false);

  // keep track to display a spinner while auth status is being checked
  const [checkingStatus, setCheckingStatus] = useState(true);

  useEffect(() => {
    // auth listener to keep track of user signing in and out
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        setLoggedIn(true);
      }

      setCheckingStatus(false);
    });
  }, []);

  return { loggedIn, checkingStatus };
};

使用 Firebase 保护路由

Protected Route With Firebase

node.js

reactjs

firebase-authentication

firebaseui

next.js

路由器：

受保护的路线：

Firebase 身份验证状态：