如何从NextJS / ReactJS中的JWT cookie中获取用户信息

Question

我正在学习Next.JS和React，想知道是否可以从存储JWT的cookie中获取用户详细信息。

我已经成功将JWT设置为cookie，并可以成功记录它，也成功解码了它，但无法找到如何从其中获取用户名、ID等信息的方法。以下是我目前的进展:

import React from "react";
import App from "../components/App.js";
import cookie from "react-cookies";
import jwt_decode from "jwt-decode";

export default class Dashboard extends React.Component {
 static async getInitialProps() {
  const token = cookie.load("jwt");
  return { token };
 }

constructor(props) {
  super(props);
  this.state = props.token;
 }

render() {
  const current_user = jwt_decode(this.props.token, { header: true });

return (
  <App>
    <p>Username: {current_user.username}</p>
  </App>
  );
  }
}

理想情况下，我希望能够将cookie的值设置为用户变量并从中提取属性，例如current_user.username。除非我完全错了并且错过了一些非常重要的东西！任何帮助都将不胜感激！

- Thomas Allen

---

当前的行为是什么？ - Colin Ricardo

Answer 1

你可以使用此 parseJwt 函数来提取用户数据：

function parseJwt(token) {
    if (!token) { return; }
    const base64Url = token.split('.')[1];
    const base64 = base64Url.replace('-', '+').replace('_', '/');
    return JSON.parse(window.atob(base64));
}

console.log(parseJwt('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c'))

它将提取jwt令牌内部的数据并返回一个对象。

- Harish Soni

---

如果您想要一个纯JS的解决方案，这是完美的选择。 - MattWeiler

Answer 2

你可以使用npm包。只需在cmd中运行npm install jwt-decode，并使用以下代码：

import jwt_decode from "jwt-decode"; 
  
const token = "eyJ0eXAiO.../// jwt token";
const decoded = jwt_decode(token);

- Md.Shakil Shaikh