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

npm install jsonwebtoken cookie-parser

// jwtMiddleware.js

import jwt from 'jsonwebtoken';
import cookieParser from 'cookie-parser';

const jwtMiddleware = (req, res, next) => {
  // 使用cookie-parser中间件解析cookie
  cookieParser()(req, res, () => {
    // 从cookie中获取JWT令牌
    const token = req.cookies.jwt;

    if (token) {
      try {
        // 验证并解码JWT令牌
        const decoded = jwt.verify(token, 'your-secret-key');

        // 将用户信息添加到请求对象中
        req.user = decoded;
      } catch (error) {
        // 处理令牌验证失败的情况
        console.error('JWT verification failed:', error.message);
      }
    }

    // 继续处理下一个中间件或路由处理程序
    next();
  });
};

export default jwtMiddleware;

// pages/_app.js

import jwtMiddleware from '../path/to/jwtMiddleware';

function MyApp({ Component, pageProps }) {
  // 使用jwtMiddleware中间件
  jwtMiddleware();

  return <Component {...pageProps} />;
}

export default MyApp;

// 一个示例页面或组件

import React from 'react';

function ProfilePage({ user }) {
  return (
    <div>
      <h1>Welcome, {user.username}!</h1>
      <p>Email: {user.email}</p>
    </div>
  );
}

export async function getServerSideProps({ req }) {
  // 从req.user中获取用户信息
  const user = req.user;

  return {
    props: {
      user,
    },
  };
}

export default ProfilePage;