Next JS 和 Firebase 身份验证受保护的路由

Question

我正在将 Firebase 和 Next JS 用于 Web 应用程序，您必须登录才能访问任何其他页面（所有路由都受到保护）。我首先做的是在 _app.js 中设置一个提供程序，以便我可以访问用户的状态（登录或未登录）。然后，当请求受保护的页面时，我检查用户状态并在需要时重定向到登录页面，如下所示：

import Users from "../components/users/Users";
import Layout from "../components/general/Layout";

import { useEffect, useContext } from "react";
import { AuthContext } from "../components/authentication/auth";

import router from "next/router";

function users() {
  const { currentUser } = useContext(AuthContext);

  useEffect(() => {
    if (currentUser) {
      console.log("signed in!");
    } else if (currentUser == null) {
      router.push("/login");
    }
  }, [currentUser]);
  return (
    <Layout>
      <Users />
    </Layout>
  );
}

export default users;

现在，这原则上是有效的，但是重定向需要一些时间，并且在重定向之前首先显示“用户”页面。我知道有这个选项： https ://github.com/gladly-team/next-firebase-auth

但是，我不喜欢依赖于此，并且想知道是否有更好、更直接的方法来做到这一点？

Answer 1

目前，无论 的值如何currentUser，您都会渲染Users组件树。null为了防止这种情况，您需要在组件仍在加载时返回（以隐藏它）。因为您也不希望在用户注销时呈现任何内容，所以您null也应该返回该内容。

function users() { // <- rename this to something else, like `UsersPage`
  const { currentUser } = useContext(AuthContext);

  useEffect(() => {
    if (currentUser) {
      console.log("signed in!");
    } else if (currentUser == null) {
      router.push("/login");
    }
  }, [currentUser]);

  if (!currentUser) {
    // user is signed out or still being checked.
    // don't render anything
    return null;
  }

  // if here, user is signed in, show the component
  return (
    <Layout>
      <Users />
    </Layout>
  );
}