由于 _middleware.ts 中的 jsonwebtoken，Nextjs 构建失败

Question

希望获得有关 Vercel 部署的一些帮助。我创建了一个 _middleware.ts 文件，用于检查用户 cookie 中的 JWT。

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { JwtPayload, verify } from 'jsonwebtoken'

export async function middleware(req: NextRequest) {
  let response = NextResponse.next()
  const url = req.nextUrl.clone()

  const token = req.cookies['allow-list']

  if (!token || token === 'deleted') {
    return response 
  }

  try {
    const decodedToken = verify(
      token,
      process.env.TOKEN_SECRET as string
    ) as JwtPayload
  } catch (e) {}

  return response
}

但是，正因为如此，当我尝试构建项目时，出现以下错误：“中间件页面/_middleware 中不允许动态代码评估（例如“eval”、“新函数”）”。有没有解决的办法？当我在本地运行它时它有效。

[22:59:29.409] Cloning github.com/dimitriborgers/test (Branch: master, Commit: efc1977)
[22:59:30.051] Cloning completed: 642.161ms
[22:59:30.427] Installing build runtime...
[22:59:34.350] Build runtime installed: 3.924s
[22:59:35.048] Looking up build cache...
[22:59:35.297] Build Cache not found
[22:59:35.503] Installing dependencies...
[22:59:35.507] Detected `package-lock.json` generated by npm 7...
[22:59:54.367] 
[22:59:54.367] added 519 packages in 19s
[22:59:54.367] 
[22:59:54.367] 97 packages are looking for funding
[22:59:54.367]   run `npm fund` for details
[22:59:54.386] Detected Next.js version: 12.1.0
[22:59:54.392] Detected `package-lock.json` generated by npm 7...
[22:59:54.392] Running "npm run build"
[22:59:54.673] 
[22:59:54.673] > build
[22:59:54.673] > next build
[22:59:54.673] 
[22:59:55.312] Attention: Next.js now collects completely anonymous telemetry regarding usage.
[22:59:55.312] This information is used to shape Next.js' roadmap and prioritize features.
[22:59:55.312] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
[22:59:55.312] https://nextjs.org/telemetry
[22:59:55.313] 
[22:59:55.351] info  - Checking validity of types...
[22:59:58.776] warn  - No ESLint configuration detected. Run next lint to begin setup
[22:59:58.781] info  - Creating an optimized production build...
[22:59:58.786] warn  - using beta Middleware (not covered by semver) - https://nextjs.org/docs/messages/beta-middleware
[23:00:22.847] Failed to compile.
[23:00:22.847] 
[23:00:22.847] ./node_modules/function-bind/implementation.js
[23:00:22.847] Dynamic Code Evaluation (e. g. 'eval', 'new Function') not allowed in Middleware pages/_middleware
[23:00:22.848] 
[23:00:22.848] Import trace for requested module:
[23:00:22.848] ./node_modules/function-bind/index.js
[23:00:22.848] ./node_modules/call-bind/index.js
[23:00:22.848] ./node_modules/call-bind/callBound.js
[23:00:22.848] ./node_modules/which-typed-array/index.js
[23:00:22.848] ./node_modules/util/support/types.js
[23:00:22.848] ./node_modules/util/util.js
[23:00:22.848] ./node_modules/jws/lib/sign-stream.js
[23:00:22.849] ./node_modules/jws/index.js
[23:00:22.849] ./node_modules/jsonwebtoken/decode.js
[23:00:22.849] ./node_modules/jsonwebtoken/index.js
[23:00:22.849] ./pages/_middleware.ts
[23:00:22.849] 
[23:00:22.849] ./node_modules/get-intrinsic/index.js
[23:00:22.849] Dynamic Code Evaluation (e. g. 'eval', 'new Function') not allowed in Middleware pages/_middleware
[23:00:22.849] 
[23:00:22.849] Import trace for requested module:
[23:00:22.849] ./node_modules/call-bind/callBound.js
[23:00:22.849] ./node_modules/which-typed-array/index.js
[23:00:22.849] ./node_modules/util/support/types.js
[23:00:22.849] ./node_modules/util/util.js
[23:00:22.849] ./node_modules/jws/lib/sign-stream.js
[23:00:22.849] ./node_modules/jws/index.js
[23:00:22.850] ./node_modules/jsonwebtoken/decode.js
[23:00:22.850] ./node_modules/jsonwebtoken/index.js
[23:00:22.850] ./pages/_middleware.ts
[23:00:22.850] 
[23:00:22.850] ./node_modules/has/src/index.js
[23:00:22.850] Dynamic Code Evaluation (e. g. 'eval', 'new Function') not allowed in Middleware pages/_middleware
[23:00:22.850] 
[23:00:22.850] Import trace for requested module:
[23:00:22.850] ./node_modules/get-intrinsic/index.js
[23:00:22.850] ./node_modules/call-bind/callBound.js
[23:00:22.850] ./node_modules/which-typed-array/index.js
[23:00:22.850] ./node_modules/util/support/types.js
[23:00:22.850] ./node_modules/util/util.js
[23:00:22.850] ./node_modules/jws/lib/sign-stream.js
[23:00:22.850] ./node_modules/jws/index.js
[23:00:22.850] ./node_modules/jsonwebtoken/decode.js
[23:00:22.851] ./node_modules/jsonwebtoken/index.js
[23:00:22.851] ./pages/_middleware.ts
[23:00:22.851] 
[23:00:22.851] ./node_modules/is-generator-function/index.js
[23:00:22.851] Dynamic Code Evaluation (e. g. 'eval', 'new Function') not allowed in Middleware pages/_middleware
[23:00:22.851] 
[23:00:22.851] Import trace for requested module:
[23:00:22.851] ./node_modules/util/support/types.js
[23:00:22.852] ./node_modules/util/util.js
[23:00:22.852] ./node_modules/jws/lib/sign-stream.js
[23:00:22.852] ./node_modules/jws/index.js
[23:00:22.852] ./node_modules/jsonwebtoken/decode.js
[23:00:22.852] ./node_modules/jsonwebtoken/index.js
[23:00:22.852] ./pages/_middleware.ts
[23:00:22.853] 
[23:00:22.853] ./node_modules/next/dist/compiled/vm-browserify/index.js
[23:00:22.854] Dynamic Code Evaluation (e. g. 'eval', 'new Function') not allowed in Middleware pages/_middleware
[23:00:22.854] 
[23:00:22.854] Import trace for requested module:
[23:00:22.854] ./node_modules/jwa/index.js
[23:00:22.854] ./node_modules/jws/lib/sign-stream.js
[23:00:22.854] ./node_modules/jws/index.js
[23:00:22.854] ./node_modules/jsonwebtoken/decode.js
[23:00:22.855] ./node_modules/jsonwebtoken/index.js
[23:00:22.855] ./pages/_middleware.ts
[23:00:22.855] 
[23:00:22.855] 
[23:00:22.855] > Build failed because of webpack errors
[23:00:22.886] Error: Command "npm run build" exited with 1

Answer 1

由于中间件运行时基于浏览器而不是服务器，因此 eval 不允许出现在该位置。此外，中间件运行时允许的最大持续时间为 1.5 秒。因此，我们不能依赖边缘函数从另一台服务器获取验证。

jsonwebtoken我已经完全删除了库的使用，并jose用来克服这个问题并保持代码库的简化。该代码适用于浏览器和服务器运行时，使我们能够在中间件层本身验证用户。

签署智威汤逊

import * as jose from 'jose';

const jwtToken = await new jose.SignJWT({ userId: `your-data` })
                        .setProtectedHeader({ alg: 'HS256' })
                        .setIssuedAt()
                        .setExpirationTime('30d')
                        .sign(new TextEncoder().encode(`secret-key-phrase`));

验证智威汤逊

这适用于中间件，没有任何问题（Vercel 上的 Edge Function）。

import * as jose from 'jose';

try {
    const { payload: jwtData } = await jose.jwtVerify(
        jwtToken, new TextEncoder().encode(`secret-key-phrase`)
    );
    // jwtData.uid => `your-data`
} catch (error) {
    console.log(error);
    // JWT validation failed or token is invalid
}

Answer 2

使用 @tsndr/cloudflare-worker-jwt 库代替 jsonwebtoken 是有效的。