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解码令牌来获取前端用户数据，但这破坏了我的应用程序，并出现了错误。我在网上看到这是最近Webpack（v5）的问题，有没有办法修复它？我也不确定错误消息要求我做什么。澄清一下，如果没有JWT方法，我确实可以得到令牌并成功登录。

- andrew kim

---

我发现你可以使用一个叫做jwt-decode的库 https://www.npmjs.com/package/jwt-decode - andrew kim

Answer 1

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

- huxnet

Answer 2

安装 jwt-decode

npm i jwt-decode

import jwtDecode from 'jwt-decode'

那么。

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

- Mrunal Tupe

Answer 3

为了避免这个问题，使用任何其他的jwt包而不是jsonwebtoken。或者使用jwt-decode进行特定的解码操作。因为React是一个前端库，它没有节点组件来理解jwt。所以在你的前端安装jwt-decode。

npm i jwt-decode

然后将其导入到您的特定页面/组件中

import jwt from 'jwt-decode'

然后像之前一样解码令牌。

const user = jwt.decode(token)

不要在不同的组件中解构。它专门用于在您导入的页面/组件中工作。

- Abishethvarman V

Answer 4

你可以像这样从jsonwebtoken中仅导入decode，我认为这会有所帮助。

import { decode } from "jsonwebtoken";

const secret = decode(params.userName);

- Elias Salom