咨询：如何在Next.js中间件中正确使用Redux？

你当前的写法存在核心问题：Next.js中间件运行在服务器/Edge Runtime环境，和客户端的Redux Store完全隔离，直接调用store.getState()拿到的只是服务器端初始化的空状态，而非用户客户端实际的登录状态。

正确的解决思路 #

由于中间件无法直接访问客户端Redux状态，推荐通过Cookie存储认证信息来实现逻辑，因为请求会携带Cookie，中间件可以直接读取：

• 客户端同步状态与Cookie：在登录/登出操作时，更新Redux状态的同时，设置或清除对应的认证Cookie（比如存储token或用户标识）。
• 中间件读取Cookie判断状态：在中间件中直接从请求的Cookie中读取认证信息，代替从Redux Store获取。

修改后的示例代码 #

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  // 从请求Cookie中读取认证信息
  const authCookie = request.cookies.get('authToken');
  const isAuthenticated = !!authCookie;

  if (request.nextUrl.pathname.startsWith('/login')) {
    if (isAuthenticated) {
      return NextResponse.rewrite(new URL('/', request.url));
    }
  }

  if (request.nextUrl.pathname.startsWith('/dashboard')) {
    if (!isAuthenticated) {
      return NextResponse.redirect(new URL('/login', request.url));
    }
  }
}

补充说明 #

• 不要在中间件中使用useSelector：这是React Hooks，只能在React组件内部使用，中间件不属于React组件上下文，直接调用会报错。
• Cookie的安全性：存储敏感信息时，要设置httpOnly、secure、sameSite等属性，防止XSS或CSRF攻击。

内容的提问来源于stack exchange，提问作者Eric