面试题：Next.js中API Routes中间件如何实现基础认证

Question

在Next.js的API Routes场景下，假设你需要对特定的API接口进行基础认证（Basic Authentication），请阐述如何使用中间件来实现这一功能，并且给出关键代码示例。

Answer 1

实现步骤

1. 安装依赖：确保项目中安装了next和cookie-parser（如果使用Cookie相关操作）等必要依赖。
2. 创建中间件：在lib目录（可自定义）下创建一个用于基础认证的中间件文件，比如basic-auth-middleware.js。
3. 在API Routes中使用中间件：在需要认证的API Route文件中引入并使用该中间件。

关键代码示例

1. basic-auth-middleware.js

import { NextApiRequest, NextApiResponse } from 'next';

const basicAuthMiddleware = (req: NextApiRequest, res: NextApiResponse, next: () => void) => {
    const authHeader = req.headers.authorization;
    if (!authHeader) {
        return res.status(401).json({ error: 'Authorization header is missing' });
    }
    const base64Credentials = authHeader.split(' ')[1];
    const credentials = Buffer.from(base64Credentials, 'base64').toString('ascii');
    const [username, password] = credentials.split(':');
    // 替换为实际的用户名和密码验证逻辑
    const validUsername = 'your-username';
    const validPassword = 'your-password';
    if (username === validUsername && password === validPassword) {
        next();
    } else {
        return res.status(401).json({ error: 'Invalid credentials' });
    }
};

export default basicAuthMiddleware;

2. 在API Route中使用 假设在pages/api/some-protected-route.js中使用：

import type { NextApiRequest, NextApiResponse } from 'next';
import basicAuthMiddleware from '../../lib/basic-auth-middleware';

export default function handler(req: NextApiRequest, res: NextApiResponse) {
    basicAuthMiddleware(req, res, () => {
        // 认证通过后的业务逻辑
        res.status(200).json({ message: 'Authenticated successfully' });
    });
}