Question

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

我的_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;

因此，我正在通过道具传递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的一部分，并且可以正常工作，但不确定如何使其在导航显示/隐藏方面起作用。

Answer 1

我可以看到您没有将 userAuth 道具传递给 mainLayout.js 中的导航栏组件。另外，您还需要进行父母/子女道具交流。

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

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

1 个答案: