Express用户登录验证成功后无法跳转至主页面app.html问题求助

问题排查与修复方案 #

存在的3个核心错误 #

• 重复发送响应：Express 中单个请求只能返回一次响应，你在调用 res.sendFile(app) 后又执行 res.send( { user , token } )，会直接触发响应重复发送报错，前者执行也会被中断，无法正常返回HTML内容。
• 中间件顺序错误：app.js 中你将 express.json() 解析中间件放在了路由注册之后，请求进入路由时还未完成JSON格式解析，req.body 会返回空值，影响登录验证逻辑执行。同时路由中重复注册了 express.json() 属于冗余配置。
• 请求逻辑不匹配：如果你是用 AJAX/fetch 方式提交登录请求，浏览器不会主动根据服务端返回的HTML跳转页面，返回的HTML内容只会被传递给前端JS回调函数，不会触发页面刷新。

修复方案 #

方案1：传统表单提交（服务端直接控制跳转）

1. 调整app.js中间件顺序，新增表单解析中间件：

const user_router = require( './router/user_router' );
const path = require( 'path' );
const public_directory = path.join( __dirname, '../public' );
const express = require( 'express' );
const app = express();
// 解析中间件必须放在路由注册之前
app.use( express.json() );
app.use(express.urlencoded({ extended: true })); // 兼容表单格式提交
app.use(express.static( public_directory , {index: 'login.html'}));
app.use( user_router );

2. 修改路由逻辑，删除重复响应，token存入cookie：

const auth = require( '../middlewear/auth' );
const express = require( 'express' );
const User = require( '../model/user_model' );
const path = require( 'path' ); // 把path引入放到全局，不要放在请求回调里
const router = new express.Router();

router.post( '/users/login' , async ( req , res ) => {
    try {       
        const user = await User.find_by_credentials( req.body.email , req.body.password );      
        const token = await user.create_token();
        // token存入httpOnly cookie，避免XSS风险
        res.cookie('auth_token', token, { httpOnly: true, maxAge: 24 * 60 * 60 * 1000 });
        const appPath = path.join( __dirname, '../../public/app.html' );        
        res.sendFile(appPath);
        // 删掉原有的res.send({user,token})代码
    }
    catch( err ){
        res.status( 400 ).send();
    }
});

3. 前端使用原生<form action="/users/login" method="POST">标签提交表单即可。

方案2：前后端分离（AJAX提交请求）

1. 服务端只返回JSON数据，不返回HTML：

router.post( '/users/login' , async ( req , res ) => {
    try {       
        const user = await User.find_by_credentials( req.body.email , req.body.password );      
        const token = await user.create_token();
        res.send({
            status: 'success',
            data: { user, token },
            redirect: '/app.html'
        });
    }
    catch( err ){
        res.status( 400 ).send({ status: 'fail', msg: '账号或密码错误' });
    }
});

2. 前端请求成功后手动控制跳转：

// 前端AJAX请求回调示例
fetch('/users/login', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(loginFormData)
}).then(res => res.json())
.then(data => {
    if(data.status === 'success') {
        // 把token存入本地存储
        localStorage.setItem('auth_token', data.data.token);
        // 手动跳转至主页面
        location.href = data.redirect;
    }
})

额外校验项 #

可以打印path.join( __dirname, '../../public/app.html' )的输出结果，确认路径是否正确指向app.html的物理位置，避免路径配置错误导致返回404。

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