保护路由与数据
根据用户身份验证状态，实施中间件和服务端检查，以保护特定路由和数据
保护路由与数据 是 CoddyKit 上的免费 Next.js 15 Fullstack (App Router + Server Actions) 课时。 这是第 3 节课，共 6 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Next.js 15 Fullstack (App Router + Server Actions) 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Next.js 15 Fullstack (App Router + Server Actions) 课程共包含 6 节课。
本课时的部分内容尚未翻译，以英文显示。
Why Protect Routes & Data?
In any application, not all information or features should be accessible to everyone. Protecting routes and data is crucial for security.
- Route Protection: Prevents unauthorized users from even reaching certain pages (e.g., an admin dashboard).
- Data Protection: Ensures users can only view or modify data they are authorized to access (e.g., a user's own profile, not someone else's).
This lesson explores how Next.js helps you enforce these rules on the server side.
Introducing Next.js Middleware
Next.js Middleware allows you to run code before a request is completed. It's like a gatekeeper for your application.
Middleware runs on the Edge Runtime, providing extremely fast execution. It can:
- Redirect users to different pages.
- Rewrite URLs.
- Add/modify request or response headers.
- Perform authentication checks.
Setting Up Middleware
To use middleware, create a file named middleware.ts (or .js) at the root of your project or within the src or app directory.
This file exports a function that receives the incoming request and returns a response.
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
// Your protection logic goes here
console.log('Middleware executed for:', request.url);
return NextResponse.next();
}
// Configure which paths the middleware applies to
export const config = {
matcher: ['/dashboard/:path*', '/profile'],
};
Redirecting Unauthorized Users
A common use case for middleware is to redirect users who are not authenticated away from protected routes.
You can check for an authentication token or session cookie and, if missing, redirect them to a login page.
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const isAuthenticated = request.cookies.has('session_token');
const isLoginPage = request.nextUrl.pathname.startsWith('/login');
if (!isAuthenticated && !isLoginPage) {
const url = request.nextUrl.clone();
url.pathname = '/login';
return NextResponse.redirect(url);
}
return NextResponse.next();
}
export const config = {
matcher: ['/dashboard/:path*', '/profile', '/settings'],
};
Server-Side Data Checks
While middleware protects routes, you also need to protect the data itself. A user might bypass client-side checks or try to access data via an API.
Always perform authorization checks directly within your Server Components, Server Actions, or API routes before fetching or mutating sensitive data.
- Middleware: Route-level access control.
- Server Components/Actions: Data-level access control.
Protecting Data in Server Components
Inside a Server Component, you can check the user's authentication status and roles to decide what data to fetch or display.
If the user isn't authorized, you might redirect them, show an 'Access Denied' message, or simply not render sensitive parts of the UI.
import { redirect } from 'next/navigation';
// Assume 'getUserSession' is a helper function
// that retrieves the current user's session from cookies/headers.
async function getUserSession() {
// In a real app, this would securely fetch session details.
// For demo, let's simulate a check.
const hasSessionCookie = true; // Check request headers for auth cookie
return hasSessionCookie ? { id: 'user123', name: 'Alice' } : null;
}
export default async function ProtectedDashboard() {
const user = await getUserSession();
if (!user) {
redirect('/login'); // Use next/navigation's redirect for Server Components
}
return (
<div>
<h1>Welcome, {user.name}!</h1>
<p>This is your confidential dashboard content.</p>
</div>
);
}
Protecting Data with Server Actions
Server Actions are powerful for handling form submissions and data mutations. It's critical to include authorization checks within them.
Before performing any database operations or sensitive logic, verify that the user initiating the action has the necessary permissions.
import { revalidatePath } from 'next/cache';
// Assume 'getCurrentUser' gets the user initiating the action
// and 'isAdmin' checks their role.
async function getCurrentUser() {
// Simulate fetching user from session/context
return { id: 'user123', role: 'admin' }; // Or 'guest'
}
async function createProduct(formData: FormData) {
'use server';
const user = await getCurrentUser();
if (!user || user.role !== 'admin') {
throw new Error('Unauthorized: Only admins can create products.');
}
const productName = formData.get('name') as string;
// Simulate database operation
console.log(`Admin ${user.id} created product: ${productName}`);
// await db.products.create({ data: { name: productName } });
revalidatePath('/admin/products');
return { success: true, message: 'Product created!' };
}
export default function ProductForm() {
return (
<form action={createProduct}>
<input type="text" name="name" placeholder="Product Name" required />
<button type="submit">Create Product</button>
</form>
);
}
Handling Access Denied
When a user is unauthorized, you need to provide clear feedback. This can be:
- Redirecting: To a login page or an 'Access Denied' page.
- Displaying an error: Showing a message directly on the page.
- Throwing an error: Allowing Next.js
error.jsboundaries to catch it.
Choose the method that best fits the user experience and the severity of the access attempt.
Defense in Depth
The best security approach is 'defense in depth'. This means applying multiple layers of security checks.
- Client-side: Hide UI elements (not for security, but UX).
- Middleware: Protect entire routes.
- Server Components/Actions: Protect specific data operations.
- Database: Use database-level permissions where appropriate.
Never trust client-side checks alone; always validate on the server.
Best Practices Summary
To ensure robust security for your Next.js application:
- Always Authenticate & Authorize: Verify user identity and permissions for every sensitive operation.
- Use Environment Variables: Store secrets (e.g., database credentials) securely.
- Sanitize Inputs: Prevent injection attacks by validating and sanitizing all user input.
- Least Privilege: Grant users only the minimum permissions they need.
Quick Check: Route Protection
You want to prevent unauthenticated users from accessing any page under /admin. Where should the primary check for this be implemented?
Recap: Protecting Your App
You've learned how to secure your Next.js 15 application using a multi-layered approach:
- Middleware: Guards entire routes, redirecting unauthorized users.
- Server Components: Conditionally render UI or redirect based on user authorization.
- Server Actions: Protect data mutations by verifying user permissions before execution.
Combining these techniques provides robust protection for both your routes and the sensitive data within your application.
用 AI 导师学习 TypeScript — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 22
- 课程
- 88
常见问题解答
「保护路由与数据」课时是免费的吗？
是的 — 「保护路由与数据」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Next.js 15 Fullstack (App Router + Server Actions) 课程的其余内容，请升级到 CoddyKit PRO。 Next.js 15 Fullstack (App Router + Server Actions) 课程共包含 6 节课。
「保护路由与数据」这节课中我会学到什么？
根据用户身份验证状态，实施中间件和服务端检查，以保护特定路由和数据 你通过在浏览器中直接运行的动手代码来练习 Next.js 15 Fullstack (App Router + Server Actions)，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Next.js 15 Fullstack (App Router + Server Actions) 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Next.js 15 Fullstack (App Router + Server Actions) 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 6 节。
「保护路由与数据」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Next.js 15 Fullstack (App Router + Server Actions) 课中编写并运行代码吗？
能。每节 Next.js 15 Fullstack (App Router + Server Actions) 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。