面试题：Next.js 中如何防止页面路由被恶意访问

基于中间件进行路由保护
- 在 Next.js 中可以利用自定义中间件（middleware.js）。例如：

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

export function middleware(request: NextRequest) {
    const token = request.cookies.get('token');
    if (request.nextUrl.pathname.startsWith('/admin') && (!token || token.value === '')) {
        return NextResponse.redirect(new URL('/login', request.url));
    }
    return NextResponse.next();
}

- 这段代码检查请求的路径是否是管理页面（以`/admin`开头），如果没有有效的令牌（从`cookie`中获取），则重定向到登录页面。

2. 页面级别的权限验证 - 在特定页面（如后台管理页面）的getServerSideProps或getInitialProps（对于旧版本）中进行验证。

import { GetServerSideProps } from 'next';

export const getServerSideProps: GetServerSideProps = async (context) => {
    const token = context.req.cookies.token;
    if (!token) {
        return {
            redirect: {
                destination: '/login',
                permanent: false
            }
        };
    }
    return {
        props: {}
    };
};

const AdminPage = () => {
    return <div>Admin Page Content</div>;
};

export default AdminPage;

- 这里在服务器端渲染时检查用户是否有有效的令牌，没有则重定向到登录页面。

3. 基于角色的访问控制（RBAC） - 扩展上述验证逻辑，不仅检查用户是否登录，还检查用户角色。例如，只有具有admin角色的用户才能访问后台管理页面。

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

export function middleware(request: NextRequest) {
    const token = request.cookies.get('token');
    const userRole = request.cookies.get('role');
    if (request.nextUrl.pathname.startsWith('/admin') && (!token || token.value === '' || userRole?.value!== 'admin')) {
        return NextResponse.redirect(new URL('/login', request.url));
    }
    return NextResponse.next();
}

- 此中间件不仅检查令牌，还检查用户角色是否为`admin`，否则重定向。

星途面试题库

面试题：Next.js 中如何防止页面路由被恶意访问

知识考点

面试题答案