在 Next.js 12 新中间件 api 中将变量从中间件传递到页面

Question

问题的背景

Vercel 最近发布了 Next.js 有史以来最大的更新。Next.js 博客。他们引入了很多新功能，但我最喜欢的是Middleware：

“使您能够使用代码而不是配置。这为您在 Next.js 中提供了充分的灵活性，因为您可以在请求完成之前运行代码。根据用户的传入请求，您可以通过重写、重定向、添加标头或甚至流式传输 HTML。”

问题

该问题使用以下结构。

- /pages
    index.js
    signin.js
    - /app
      _middleware.js # Will run before everything inside /app folder
      index.js

这里的两个重要文件是/app/_middleware.js和/app/index.js。

- /pages
    index.js
    signin.js
    - /app
      _middleware.js # Will run before everything inside /app folder
      index.js

// /app/_middleware.js

import { NextResponse } from 'next/server';

export function middleware(req, event) {
  const res = { isSignedIn: true, session: { firstName: 'something', lastName: 'else' } }; // This "simulates" a response from an auth provider
  if (res.isSignedIn) {

    // Continue to /app/index.js
    return NextResponse.next();
  } else {

    // Redirect user
    return NextResponse.redirect('/signin');
  }
}

在此示例中/app/index.js需要访问res.sessionJSON 数据。是否可以在函数中传递它NextResponse.next()或者您需要做其他事情吗？

在快递中你可以做res.locals.session = res.session

Answer 1

根据示例（具体参见/pages/_middleware.ts和/lib/auth.ts），执行此操作的规范方法似乎是通过 cookie 设置身份验证。

在您的中间件函数中，它看起来像：

// /app/_middleware.js

import { NextResponse } from 'next/server';

export function middleware(req, event) {
  const res = { isSignedIn: true, session: { firstName: 'something', lastName: 'else' } }; // This "simulates" a response from an auth provider
  if (res.isSignedIn) {

    // Continue to /app/index.js
    return NextResponse.next().cookie("cookie_key", "cookie_value"); // <--- SET COOKIE
  } else {

    // Redirect user
    return NextResponse.redirect('/signin');
  }
}