如何让express-basic-auth弹出用户名密码弹窗？解决401未授权问题

我之前也碰到过类似的情况，其实问题的核心在于express-basic-auth的默认配置没有触发浏览器的认证弹窗机制。原来Node.js内置的basicAuth模块会自动发送WWW-Authenticate响应头，浏览器识别到这个头就会弹出用户名密码输入框；而express-basic-auth默认是关闭这个行为的，所以直接返回了401错误，没有触发弹窗。

下面是具体的解决步骤和示例代码：

关键配置项：开启challenge选项 #

要让浏览器弹出认证弹窗，必须在express-basic-auth的配置中设置challenge: true，这个选项会让中间件在返回401时自动添加WWW-Authenticate头。另外你还可以设置realm选项，用来在弹窗中显示自定义提示文本。

示例1：使用固定用户列表的配置 #

const express = require('express');
const basicAuth = require('express-basic-auth');
const app = express();

// 配置基础认证中间件
app.use(basicAuth({
  users: { 'my-username': 'my-secure-password' }, // 你的用户名密码对
  challenge: true, // 必须开启这个才能触发浏览器弹窗
  realm: 'My Node.js App' // 弹窗中会显示的提示内容，可选
}));

// 测试路由
app.get('/', (req, res) => {
  res.send('你已成功通过认证！');
});

app.listen(3000, () => {
  console.log('服务器运行在端口3000');
});

示例2：使用自定义认证逻辑（适合从数据库验证的场景） #

如果你的用户信息不是固定的，而是需要从数据库或其他来源验证，可以用authorizer函数，同样要记得开启challenge：

app.use(basicAuth({
  authorizer: (username, password) => {
    // 这里替换成你的自定义验证逻辑，比如查询数据库
    const isUsernameValid = basicAuth.safeCompare(username, 'admin');
    const isPasswordValid = basicAuth.safeCompare(password, 'admin123');
    return isUsernameValid && isPasswordValid;
  },
  challenge: true,
  realm: '管理员后台'
}));

为什么之前的内置basicAuth能正常弹窗？ #

Node.js内置的basicAuth模块默认就会在未认证时发送WWW-Authenticate: Basic realm="..."响应头，浏览器接收到这个头后，就会自动弹出认证弹窗。而express-basic-auth为了灵活性，把这个行为设为了默认关闭，所以需要我们手动开启challenge选项来恢复这个功能。

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