用户登录后更新 Next.js 个应用程序组件

Question

我有一个静态的 2 页 Next.js 应用程序，我想将它与基于用户的系统集成。我决定使用 Auth0 for authentication. My goal is to let a user see documents that they have saved on my app, similar to Grammarly，但我不确定整个 UI 在用户登录后将如何有条件地改变。例如，考虑 NavBar，它是我应用程序中名为 navbar.js.

的组件

import Link from "next/link";
export const siteTitle = "Title";
export const siteDescription = "Description";

export default function Navbar({ page, ...props }) {
  return (
    <nav className="navbar navbar-expand-lg navbar-light bg-white">
      <div className={page == "page1" ? "container-fluid" : "container"}>
        {/* <!-- Toggle Open --> */}
        {page == "Page1" || (
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarCollapse"
          >
          </button>
        )}

        {/* <!-- Collapse --> */}
        <div className="collapse navbar-collapse" id="navbarCollapse">

          {/* <!-- Toggle Close --> */}
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarCollapse"
          >
          </button>

          {/* <!-- Buttons --> */}
          {page == "Page1" ? (
            ""
          ) : (
            <Link href="/page1">
              <a className="navbar-btn">
                Page 1
              </a>
            </Link>
          )}
          {page == "Link1" ? (
            ""
          ) : (
            <Link href="https://link2">
              <a className="secondary-navbar-btn">
                Link 1
              </a>
            </Link>
          )}
        </div>
      </div>
    </nav>
  );
}

考虑到登录后导航栏会发生变化，（我想要用户可以直接保存并稍后访问的“文档”，这意味着登录后导航栏中必须出现“我的文档”按钮）我是不确定现在应该如何编写 navbar.js 文件。我是否应该创建一个将在登录后使用的新组件？如果是这样，那看起来如何？或者那些额外的按钮应该添加到我原来的 navbar.js 文件中，但只在登录后呈现？是否存在根据登录状态修改组件的现有反应挂钩？

我将非常感谢任何指向解决与我的问题类似的问题的文档或教程的链接，因为我自己无法找到这些资源。

编辑 1：如果我可以 add/take away/change 对此 post 进行改进，请告诉我。

编辑 2：我头脑风暴了 2 种更新 UI 的方法，但我想听听一些对我的策略更有经验的意见。

选项 1：在用户登录后从同一文件中更新各个组件。不过我仍然不知道这会是什么样子。

选项 2：将用户引导至包含完全不同组件的新页面。我将无法重用我现有的组件，并且可能会重复一些代码。不过，如果它是更安全的路线，我不介意这个选项。

我对任何建议都持开放态度，只是想让它正常工作

Answer 1

最简单的方法是选项 2，Auth0 提供 hooks 告诉您是否有用户登录，您可以使用它来有条件地渲染组件。我通常使用三元运算符在 JSX 中执行此操作。

我还建议学习状态管理 API，例如 Redux 或 Context API，然后根据 logged-in 状态是真还是假有条件地渲染组件。

用户登录后更新 Next.js 个应用程序组件

Updating Next.js App Components After User Login

javascript

reactjs

user-interface

authentication

next.js