在 Next.js 中收到 JWT 尝试导入错误

问题描述 投票：0回答：1

我为用户添加了一个检查，当他们来到 / 路由时，如果他们有一个令牌，该令牌会被检查，如果它有效且未过期，他们将根据令牌中的角色值被重定向到正确的路由。如果令牌无效或过期，它将从本地存储中删除，并且用户不会被重定向，并将保留在 / 路线上。

但是导入 JWT 似乎有问题，当我启动以下代码时，我在 VSCode 终端中收到以下消息：

./src/app/page.js
Attempted import error: 'jwt-decode' does not contain a default export (imported as 'jwt_decode').

Brave 浏览器控制台中也显示相同的消息：

./src/app/page.js
Attempted import error: 'jwt-decode' does not contain a default export (imported as 'jwt_decode').

当我测试此功能登录时，被重定向到例如 /home-sportista 路线，尝试返回 / 路线，我的令牌被删除，并在 Brave 浏览器中获取此控制台日志：

Stored token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJzZWRpbiIsInJvbGUiOiJzcG9ydGlzdGEiLCJleHAiOjE3MTYyMTk4MzV9.2cWkBIKGxhEevyt_uInxeipHZPlIDk6dVvEtLJOkhck
VM10226 page.js:55 Token exists, validating...
VM10226 page.js:46 Error decoding token: TypeError: (0 , jwt_decode__WEBPACK_IMPORTED_MODULE_6__.default) is not a function
    at validateToken (VM10226 page.js:35:83)
    at eval (VM10226 page.js:56:17)
    at commitHookEffectListMount (react-dom.development.js:21102:23)
    at commitHookPassiveMountEffects (react-dom.development.js:23154:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23259:11)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23256:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
    at commitPassiveMountOnFiber (react-dom.development.js:23370:9)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:23237:7)
window.console.error @ app-index.js:33
console.error @ hydration-error-info.js:63
validateToken @ VM10226 page.js:46
eval @ VM10226 page.js:56
commitHookEffectListMount @ react-dom.development.js:21102
commitHookPassiveMountEffects @ react-dom.development.js:23154
commitPassiveMountOnFiber @ react-dom.development.js:23259
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23256
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23370
recursivelyTraversePassiveMountEffects @ react-dom.development.js:23237
commitPassiveMountOnFiber @ react-dom.development.js:23267
commitPassiveMountEffects @ react-dom.development.js:23225
flushPassiveEffectsImpl @ react-dom.development.js:26497
flushPassiveEffects @ react-dom.development.js:26438
eval @ react-dom.development.js:26172
workLoop @ scheduler.development.js:256
flushWork @ scheduler.development.js:225
performWorkUntilDeadline @ scheduler.development.js:534
Show 98 more frames
Show less
VM10226 page.js:68 Token is invalid, removing...
VM10226 page.js:53 Stored token: null
VM10226 page.js:72 No token found

这是负责/路由的page.js文件的内容：

"use client"
import React, { useState, useEffect } from 'react';
import { authMiddleware } from './middleware';
import { useRouter } from "next/navigation";
import LoginForma from "./components/LoginForma/LoginForma";
import Register from './components/Register/Register';
import jwt_decode from "jwt-decode";
import "./globals.css"

const Login = () => {
  const [showRegistration, setShowRegistration] = useState(false);
  const [showLogin, setShowLogin] = useState(false);
  const router = useRouter();

  const handleRegisterClick = () => {
    setShowRegistration(true);
    setShowLogin(false);
  };

  const handleLoginClick = () => {
    setShowLogin(true);
    setShowRegistration(false);
  };

  const validateToken = (token) => {
    try {
      const decoded = jwt_decode(token);
      console.log("Decoded token:", decoded);
      const currentTime = Date.now() / 1000;
      console.log("Current time:", currentTime);
      console.log("Token expiration time:", decoded.exp);
      if (decoded.exp < currentTime) {
        return false;
      }
      console.log("Token is valid");
      return true;
    } catch (error) {
      console.error("Error decoding token:", error);
      return false;
    }
  };

  useEffect(() => {
    document.body.classList.add('with-background');
    const token = localStorage.getItem('token');
    console.log("Stored token:", token);

    if (token) {
      console.log("Token exists, validating...");
      if (validateToken(token)) {
        console.log("Token is valid, checking user role...");
        authMiddleware(router, token, ['sportista', 'vlasnik', 'admin'])
          .then((response) => {
            router.push(`http://localhost:8081/home-${response}`);
          })
          .catch((error) => {
            console.error('Unauthorized access:', error);
          });
      } else {
        console.log("Token is invalid, removing...");
        localStorage.removeItem('token');
      }
    } else {
      console.log("No token found");
    }

    return () => {
      document.body.classList.remove('with-background');
    };
  }, [router]);

  return (
    <div>
      {!showRegistration && !showLogin && <LoginForma onRegisterClick={handleRegisterClick} />}
      {showRegistration && <Register onLoginClick={handleLoginClick} />}
      {showLogin && <LoginForma onRegisterClick={handleRegisterClick} />}
    </div>
  )
}

export default Login;

我尝试使用 ChatGPT 来解决此问题并尝试了这些导入版本：

import jwt_decode from "jwt-decode";

import { default as jwt_decode } from "jwt-decode";

import { decode as jwt_decode } from "jwt-decode";

还尝试删除并再次安装 JWT。

JWT 版本是：

"jwt-decode": "^4.0.0"

reactjs next.js import jwt importerror
1个回答
0
投票

只需将其导入即可：

import { jwtDecode } from 'jwt-decode';

这将完美地工作！！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.