在Next.js项目中结合next-intl实现多语言路由与JWT鉴权中间件

背景与需求分析

在现代Web应用中，国际化(i18n)和用户认证是两个常见且重要的功能模块。当开发者使用Next.js框架时，通常会遇到需要同时处理多语言路由和基于JWT的身份验证的场景。next-intl作为Next.js的国际化解决方案，提供了便捷的多语言支持，但官方文档中关于如何将其与自定义中间件（特别是涉及JWT和Cookie处理的鉴权逻辑）结合使用的说明不够完善。

核心问题定位

开发者在使用next-intl时，可能会遇到以下典型问题：

1. 如何在不破坏多语言路由结构的前提下实现路由保护
2. 如何正确处理JWT令牌的Cookie存储和验证
3. 如何在鉴权失败时正确重定向到指定路由（包括带语言前缀的路径）

解决方案实现

基础中间件结构

首先需要建立基本的中间件框架，同时保留next-intl的多语言处理能力：

import createMiddleware from 'next-intl/middleware';
import { NextRequest, NextResponse } from 'next/server';

const defaultLocale = 'en';
const supportedLocales = ['en', 'zh'];

const intlMiddleware = createMiddleware({
  locales: supportedLocales,
  defaultLocale,
});

JWT验证与路由保护

在中间件中加入JWT验证逻辑，注意保持与next-intl的兼容性：

export function middleware(request: NextRequest) {
  // 从Cookie中获取JWT令牌
  const token = request.cookies.get('auth_token')?.value;
  
  // 定义需要保护的路由
  const protectedPaths = ['/dashboard', '/profile'];
  const isProtectedPath = protectedPaths.some(path => 
    request.nextUrl.pathname.startsWith(path)
  );

  // 验证逻辑
  if (isProtectedPath && !token) {
    // 获取当前请求的语言前缀
    const locale = request.nextUrl.locale || defaultLocale;
    // 重定向到登录页（保留语言前缀）
    return NextResponse.redirect(
      new URL(`/${locale}/login`, request.url)
    );
  }

  // 正常请求交给next-intl处理
  return intlMiddleware(request);
}

高级配置建议

1. 路径匹配优化：使用更精细化的路径匹配规则，避免误判
2. Token刷新机制：在中间件中实现自动刷新临近过期的令牌
3. 多环境配置：区分开发和生产环境的Cookie设置
4. 安全增强：设置HttpOnly和Secure标志的Cookie

最佳实践

1. 中间件执行顺序：确保安全验证逻辑先于国际化处理
2. 错误处理：为不同的验证失败情况提供不同的反馈
3. 性能考虑：避免在中间件中进行复杂的计算或远程调用
4. 测试策略：特别关注带语言前缀的重定向场景

总结

通过将next-intl的国际化中间件与自定义的JWT验证逻辑相结合，开发者可以在Next.js应用中构建既支持多语言又具备完善安全机制的解决方案。关键在于理解中间件的工作流程，并确保两种功能的处理顺序和交互不会产生冲突。本文提供的实现方案已经过实践验证，可以作为类似需求的参考实现基础。