next 和 JWT auth 组件

Question

我一直在使用 next.js 创建一个简单的应用程序，并尝试正确地利用 JWT 进行用户身份验证。

我想使用一个导航栏和一个布局，并根据身份验证状态更改每个的详细信息，如下所示。

import React from "react";
import Link from 'next/link'


const attributeStyle = "block mt-4 lg:inline-block lg:mt-0 uppercase font-semibold text-teal-200 hover:text-white mr-4"



export default function Navbar(token) {



  return (
    <>
      {/* Navbar */}
      <nav className="relative max-w-screen-xl mx-auto flex items-center justify-between px-4 sm:px-6">
        <div className="flex items-center flex-1">
          <div className="flex items-center justify-between w-full md:w-auto">
            <Link href="/"><a className={attributeStyle}>
              <div className="hidden md:block md:ml-10">
                <h1 className="font-medium text-white hover:text-gray-900 focus:outline-none focus:text-gray-900 transition duration-150 ease-in-out">Ubik</h1>
              </div>
            </a></Link>
            {/* <svg className="fill-white h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg> */}


          </div>

        </div>
        {token ? (
        <div className="hidden md:block text-right">
          <span className="inline-flex rounded-md shadow-md">
            <span className="inline-flex rounded-md shadow-xs">
              <Link href="/account/login">
                <a className="inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-blue hover:bg-gray-50 hover:text-black focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
                  Log In
      </a>
              </Link>

            </span>
          </span>
        </div>
        ):( <div className="hidden md:block text-right">
        <span className="inline-flex rounded-md shadow-md">
          <span className="inline-flex rounded-md shadow-xs">
            <Link href="/account/login">
              <a className="inline-flex items-center px-4 py-2 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-blue hover:bg-gray-50 hover:text-black focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
                Log out
    </a>
            </Link>

          </span>
        </span>
      </div>)}
      </nav>
      {/* End Navbar */}
    </>
  );
}

LayoutLanding

import Head from "next/head";
import Link from 'next/link'

import NavBar from './newNavBar';

import Footer from "./Footer";

const layoutStyle = {
  display: "flex",
  flexDirection: "column",
  height: "100%",
  width: "100%"
};

import { Cookies, CookiesProvider } from "react-cookie";
const cookies = new Cookies();
let token = cookies.get("token");


const LayoutLanding = props => (
  <div className="Layout" style={layoutStyle}>
    <Head>
      <title>{props.title}</title>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta charSet="utf-8" />
    </Head>

    <div className=" bg-gray-900 relative pt-6 pb-16 md:pb-20 lg:pb-24 xl:pb-32  ">

      <NavBar token = {token}/>

    </div>
    <div>{props.children}</div>


<Footer/>
  </div>

);

export default LayoutLanding;

目前，我正在检查索引页面上的 JWT 身份验证，并将用户重定向到另一个页面，该页面具有一组单独的导航栏和布局组件，效率很低。但是，由于某些原因，当我通过 layoutlanding 将令牌传递给导航栏组件时，它没有注册。

这是我使用的解决方法的索引页

import React from "react";
import PropTypes from "prop-types";
import { get } from "lodash/object";
import Link from "next/link";
import Router, { useRouter } from "next/router";
import { useRef, useState } from "react";

// import fetch from 'isomorphic-unfetch';
import { Cookies, CookiesProvider } from "react-cookie";
const cookies = new Cookies();
//containers

import LandingPage from "../containers/LandingPage";
import DataChoices from "../components/LandingPage/DataChoices.js";
// Layouts
import Layout from "../components/Layout/Layout";
import Chart from "../components/Visualization/Chart";
import Table from "../components/Visualization/HekticTable";


export default function index() {
  const searchRef = useRef<HTMLInputElement>(null);
  const [message, setMessage] = useState<any>(null);

  const [productList, setProductList] = useState<any>([]);
  const [searched, setSearched] = useState(false);

  const router = useRouter();

  let token = cookies.get("token");





  if (token == null) {

    return (
      <LandingPage />


    );
  }

  return (
    <div>
    <div>token</div>
    <LandingPage />
    </div>
  );
}

我做错了什么，我该如何更好地解决这个问题，以免不必要地复制代码？

提前致谢:)

Answer 1

在你的导航栏中的参数而不是

export default function Navbar(token) {

你应该

export default function Navbar({ token }) {

或

export default function Navbar(props) {
    const token = props.token;

next 和 JWT auth 组件

next and JWT auth component

javascript

jwt

reactjs

next.js

jwt-auth