如果用户经过身份验证，如何在 next.js 中显示/隐藏菜单项答案

【问题标题】：How to show/hide menu items in next.js if user authenticated如果用户经过身份验证，如何在 next.js 中显示/隐藏菜单项
【发布时间】：2019-11-19 19:34:13
【问题描述】：

例如，如果用户实际登录，我只想显示注销按钮。

我的 _app.js 文件：

import React from "react";
import App from "next/app";
import Navbar from "../components/navbar";
import Layout from "../components/layouts/mainLayout";
import { handleAuthSSR } from "../utils/auth";

export default class MyApp extends App {
  render() {
    const { Component, pageProps, userAuth } = this.props;
    return (
      <Layout userAuth={pageProps.token}>
        <Component {...pageProps} />
      </Layout>
    );
  }
}

主布局：

import Head from "next/head";
import Navbar from "../navbar";

const Layout = props => {
  return (
    <>
      <Head>
        <title>My App</title>
        <link
          rel="stylesheet"
          href="https://bootswatch.com/4/cerulean/bootstrap.min.css"
        ></link>
        <link href="/static/css/styles.css" rel="stylesheet"></link>
      </Head>
      <Navbar />
      <div className="container">{props.children}</div>
    </>
  );
};

export default Layout;

导航栏：

import Link from "next/link";
import { logout } from "../utils/auth";

const Navbar = props => (
  <nav className="navbar navbar-expand navbar-dark bg-dark mb-4">
    <div className="container">
      <a className="navbar-brand" href="#">
        My App
      </a>
      <div className="collapse navbar-collapse">
        <ul className="navbar-nav ml-auto">
          <li className="nav-item">
            <Link href="/">
              <a className="nav-link">Home</a>
            </Link>
          </li>
          <li className="nav-item">
            <Link href="/about">
              <a className="nav-link">About</a>
            </Link>
          </li>
          <li className="nav-item">
            <Link href="/register">
              <a className="nav-link">Register</a>
            </Link>
          </li>
          {props.userAuth ? (
          <li>
            <button className="btn btn-primary" onClick={logout}>
              Logout
            </button>
          </li>
          ) : (
            <li className="nav-item">
              <Link href="/login">
                <a className="nav-link">Login</a>
              </Link>
            </li>
          )}
        </ul>
      </div>
    </div>
  </nav>
);

export default Navbar;

所以，我通过 props 传递 userAuth，但我实际上并没有得到 userAuth 的逻辑。

handleAuthSSR 看起来像：

export const handleAuthSSR = ctx => {
  const { token } = nextCookie(ctx);

  if (ctx.req && !token) {
    ctx.res.writeHead(302, { Location: "/login" });
    ctx.res.end();
    return;
  }
  if (!token) {
    console.log("no token found");
    Router.push("/login");
  }

  return token;
};

当用户四处导航并且它可以工作但不确定如何让它在导航显示/隐藏方面发挥作用时，我将其用作 HOC 的一部分。

【问题讨论】：

标签： reactjs next.js

【解决方案1】：

我可以看到您没有将 userAuth 属性传递给 mainLayout.js 中的导航栏组件。您还需要处理您的父母/孩子道具沟通。

也许您可以使用您的 HOC 来返回 token 或 false（或 null 而不是 false）。然后在 navbar.js 中使用它来切换登录/注销链接。

【讨论】：