JWT (JSON Web token)前端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-decode

npm i jwt-decode

import jwtDecode from 'jwt-decode'

然后

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

JWT (JSON Web token)前端webpack报错

JWT (JSON Web token) front end webpack error

reactjs

mongodb

jwt

react-fullstack