如何在 Next.js 中限制未登录用户访问特定页面？

如何限制未登录用户访问特定页面

引言

在开发Web应用程序时，你可能需要限制未登录用户访问某些页面。例如，你可能希望仅允许登录用户查看他们的个人资料或管理帐户设置。本文将引导你完成在Next.js中实施此功能的步骤。

定义中间件

中间件是Next.js中用于拦截和处理请求的函数。要限制未登录用户访问，我们需要定义一个检查用户登录状态的中间件。在 pages/_middleware.js 文件中创建以下中间件：

import { NextResponse } from 'next/server'
import { NextRequest } from 'next/server'

export function middleware(request) {
  const token = request.cookies.get("token")?.value;
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
}

export const config = {
  matcher: ['/protected-page'],
}

在上面代码中：

• token 是用于验证用户登录状态的cookie。
• NextResponse 用于将用户重定向到 /login 页面。
• matcher 数组指定了要应用中间件的路径。

检查路径

在中间件中，我们通过检查 request.nextUrl.pathname 来确定用户正在尝试访问的页面。例如，要限制未登录用户访问 /protected-page 路径，可以在 matcher 数组中添加：

matcher: ['/protected-page'],

重定向到登录页面

如果用户未登录，中间件将使用 NextResponse.redirect() 将他们重定向到 /login 页面。

允许访问

如果用户已登录，中间件将允许他们继续访问请求的页面。

完整实现

将以下内容添加到 pages/_middleware.js 文件中：

import { NextResponse } from 'next/server'
import { NextRequest } from 'next/server'

export function middleware(request) {
  const token = request.cookies.get("token")?.value;
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
}

export const config = {
  matcher: ['/protected-page'],
}

结论

通过使用中间件，你可以轻松地在Next.js中限制未登录用户访问特定页面。这种方法简单且有效，可以确保未登录用户无法访问敏感信息或执行未经授权的操作。

常见问题解答

1. 如何更改重定向页面？

   更改 matcher 数组中指定的路径即可更改重定向页面。

2. 如何针对不同的用户类型限制访问？

   你可以使用不同的cookie或其他身份验证机制来区分不同类型的用户，并在中间件中根据这些信息进行检查。

3. 我可以在没有cookie的情况下限制访问吗？

   可以，但可能不太安全。你可以在本地存储中存储用户身份验证信息或使用其他身份验证机制，如OAuth。

4. 如何调试中间件？

   可以在中间件中使用 console.log 语句或设置断点进行调试。

5. 为什么我看到“No middleware was found matching the request path”错误？

   确保 matcher 数组中包含了要应用中间件的路径。