如何使用express-basic-auth实现React应用简易弹窗认证，验证通过后加载静态资源

Express 的中间件执行逻辑为按注册顺序依次执行，只有前一个中间件通过校验调用next()后，才会进入后续中间件的逻辑。express-basic-auth在用户账号密码验证通过后会自动调用next()，你只需要调整中间件的注册顺序，把静态资源加载的代码放到身份认证中间件之后即可。

修改后的完整server.js代码如下：

const express = require('express');
const path = require('path');
const app = express();
const basicAuth = require('express-basic-auth');
const PORT = process.env.PORT || 5000;

// 先注册身份认证中间件，所有请求优先走校验
app.use(basicAuth({
    challenge: true,
    users: { 'me': 'openforme' }
}))

// 身份校验通过后才会执行静态资源加载逻辑
app.use(express.static(path.join(__dirname, '/client/build')))

app.listen(PORT, () => console.log(`Listening on ${PORT}`));

逻辑说明 #

• 用户发起访问请求时，首先会触发身份认证中间件，校验不通过会直接返回401状态码，弹出账号密码输入弹窗，不会走到后续逻辑
• 账号密码校验通过后，才会加载React打包后的静态资源，用户可以正常访问页面
• 如果后续有其他自定义接口路由，也需要注册在身份认证中间件之后，才能被认证逻辑保护

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