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

【问题标题】：JWT (JSON Web token) front end webpack errorJWT（JSON Web 令牌）前端 webpack 错误
【发布时间】：2022-02-12 12:51:08
【问题描述】：

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 方法，我确实取回了令牌并且登录成功。

【问题讨论】：

我发现你可以使用一个名为 jwt-decode npmjs.com/package/jwt-decode的库

标签： reactjs mongodb jwt react-fullstack

【解决方案1】：

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

【讨论】：

【解决方案2】：

安装 jwt-decode

npm i jwt-decode

import jwtDecode from 'jwt-decode'

然后

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

【讨论】：