Next.js 14 TS 中使用jwt 和 App Router 进行管理

最新推荐文章于 2025-05-14 14:24:31 发布

原创

最新推荐文章于 2025-05-14 14:24:31 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript #react.js #Next.js #Auth0

jwt是一个很基础的工作。但是因为架构不一样，就算是相同的架构，版本不一样，加jwt都会有一定的差别。现在我们的项目是Next.js 14 TS 的 App Router项目（就是没有pages那种），添加jwt的步骤：

1、安装所需的依赖：

npm install jsonwebtoken bcryptjs
npm install -D @types/jsonwebtoken @types/bcryptjs

2、配置环境变量

//在项目根目录（package.json所在目录）下创建一个.env.local文件，用于存储环境变量，例如我们的 //JWT 秘密密钥：
JWT_SECRET=my_super_secret_key
JWT_EXPIRES_IN=1h

3、我们在 app/api 文件夹中创建两个 API 路由：一个用于登录，一个用于保护的数据获取。

1. 登录 API (app/api/login/route.ts)
为实现登录功能，我们需要处理用户输入的用户名和密码，验证它们，创建 JWT 并返回给客户端。

import { NextRequest, NextResponse } from 'next/server';
import jwt from 'jsonwebtoken';
import bcrypt from 'bcryptjs';

const users = [
  { id: 1, username: '1', password: await bcrypt.hash('1', 10) },
  { id: 2, username: '2', password: await bcrypt.hash('2', 10) },
];

export async function POST(request: NextRequest) {
  const { username, password } = await request.json();

  const user = users.find(u => u.username === username);
  if (!user || !(await bcrypt.compare(password, user.password))) {
    return NextResponse.json({ error: 'Invalid username or password' }, { status: 401 });
  }

  const token = jwt.sign({ userId: user.id, username: user.username }, process.env.JWT_SECRET!, { expiresIn: process.env.JWT_EXPIRES_IN });

  return NextResponse.json({ token });
}
2. 受保护的 API (app/api/protected/route.ts)
这个路由将在请求时检查并验证 JWT，并返回受保护的数据。
import { NextRequest, NextResponse } from 'next/server';
import jwt from 'jsonwebtoken';

export function GET(request: NextRequest) {
  const authHeader = request.headers.get('authorization');
  if (!authHeader || !authHeader.startsWith('Bearer ')) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const token = authHeader.split(' ')[1];

  try {
    const decodedT