JWT（JSON Web 令牌）前端 webpack 错误

Question

import React, { useEffect, useState } from 'react'

import jwt from 'jsonwebtoken'

import { useNavigate } from 'react-router-dom'
import Navbar from './Shared/navbar'



export default function Home() {

const navigate = useNavigate();
const [user, setUser ] = useState('')

async function populateUser() {

     const req = await fetch('http://localhost:5000/users', {
        headers: {
            'x-access-token': localStorage.getItem('token'),
        },
    })

    const data = await req.json()
    if (data.status === 'ok') {
        console.log(data)
    } else {
        alert(data.error)
    }
}


useEffect(() => {

    const token = localStorage.getItem('token')
    if (token) {
        const user = jwt.decode(token)
        if (!user) {
            localStorage.removeItem('token')
            navigate('/login')
        }
    } else {
        populateUser()
    }
}, [])
return (
    <>
    <Navbar/>
    </>
)}

我试图通过使用 jwt 解码 jwt 令牌来获取前端的用户数据，但这会破坏我的应用程序，并且出现此错误

我在网上看到这是最近的 webpack 问题（v5），有办法解决这个问题吗？我也不确定错误消息要求我做什么。为了澄清，没有 jwt 方法，我确实取回了令牌并且登录成功。

Answer 1

我通过使用名为 jwt-decode 的不同包解决了这个问题。这是文档 - https://www.npmjs.com/package/jwt-decode。有用！

Answer 2

安装 jwt 解码

npm i jwt-decode

import { jwtDecode } from 'jwt-decode'

然后

const decoded = jwtDecode(token)
console.log(decoded)

jwt-decode npm 和文档的参考