Javascript 如何在带有错误消息的快速路线上重新呈现页面？

我正在开发一个简单的网站，支持基于本地JSON文件的登录和注销功能，该文件包含用户列表和哈希密码。我正在使用cookie的express会话跟踪用户是否成功登录到服务器端，并使用express作为我的服务器

在我的登录页面上，我呈现login.handlebar视图。如果用户使用匹配的凭据成功登录，则页面将重新路由到/private。当前，如果用户未输入匹配的登录凭据，页面将刷新

如果用户试图使用不正确的凭据登录，我需要重新呈现/刷新同一页面，只是这次使用401状态代码，并在页面上显示错误消息

以下是迄今为止我在服务器端的登录路径中的内容：

router.get("/", async (req, res) => {
    res.render("login/login")
})

router.post("/", async (req, res) => {
    // Check if user name is in users
    for(let i=0; i < users.length; i++){

        // If the user name is valid and found in the data base
        if(users[i].username === req.body.username){
            // Compare the passwords of the user to the hashedPassword that is stored
            let hashcmp = await bcrypt.compare(req.body.password, users[i].hashedPassword)

            if(hashcmp){
                // Set the cookie and authenticate the login
                console.log("Correct user name and password, setting AuthCookie")
                req.session.userId = String(users[i]._id)
                req.session.loggedin = true
                // Redirect to private
                res.redirect("/private")
                return
            }
            // If the passwords dont match --> break the loop
            else{
                break
            }
        }
    }

    // Otherwise redirect to get /login
    // TODO: Re-render page with error message and 401 status code
    res.redirect("/login")
    return
})

router.get（“/”，异步（req，res）=>{
res.render（“登录/登录”）
})
路由器.post（“/”，异步（请求，恢复）=>{
//检查用户名是否在用户中
for（设i=0；i请中断循环
否则{
打破
}
}
}
//否则重定向到get/login
//TODO:使用错误消息和401状态代码重新呈现页面
res.redirect（“/login”）
返回
})

实现这一目标的最佳/最理想解决方案是什么？如果还需要重新呈现登录页面，那么在实际操作中如何处理登录页面

您可以使用 . 它是Express的Flash消息中间件。我建议你读一读这方面的内容。

闪存是会话中用于存储消息的特殊区域。 消息会写入闪存，并在显示到后清除 用户。闪存通常与重定向结合使用， 确保该消息可用于下一页 渲染

首先，在你的

app.js

文件中，需要这个模块

const flash=require（'connect-flash'）

然后，在同一文件中，在路线定义之前，添加此代码

app.use(flash());

// Add errors on locals.
app.use(function (req, res, next) {
  res.locals.errors = req.flash("error");
  next();
});

res.locals
是一个对象，其中包含可用于下一个渲染视图的响应局部变量。

接下来，在控制器中的
res.redirect（“/login”）
之前，在本地对象中添加错误消息

// Otherwise redirect to get /login
// TODO: Re-render page with error message and 401 status code
req.flash("error", "User does not exist.");
res.redirect("/login")

最后要做的是在登录视图中添加
错误
。我不确定车把，但在
ejs
文件中，我使用了以下内容：

<div>
<% errors.forEach(function (error) { %>
    <p><%= error %></p>       
<% }) %>
</div>




也许在车把上你可以用这样的东西

<div>
  {{#each errors}}
    <p>{{this}}</p>
  {{/each}}
</div>


{{{#每个错误}
{{this}}

{{/每个}}

同样，您应该阅读
connectflash
的工作原理以及使用此模块可以执行的操作。它对于不同类型的消息非常有用，不仅仅是错误消息。
您可以使用
. 它是Express的Flash消息中间件。我建议你读一读这方面的内容。

闪存是会话中用于存储消息的特殊区域。
消息会写入闪存，并在显示到后清除
用户。闪存通常与重定向结合使用，
确保该消息可用于下一页
渲染

首先，在你的
app.js
文件中，需要这个模块
const flash=require（'connect-flash'）

然后，在同一文件中，在路线定义之前，添加此代码

app.use(flash());

// Add errors on locals.
app.use(function (req, res, next) {
  res.locals.errors = req.flash("error");
  next();
});

res.locals
是一个对象，其中包含可用于下一个渲染视图的响应局部变量。

接下来，在控制器中的
res.redirect（“/login”）
之前，在本地对象中添加错误消息

// Otherwise redirect to get /login
// TODO: Re-render page with error message and 401 status code
req.flash("error", "User does not exist.");
res.redirect("/login")

最后要做的是在登录视图中添加
错误
。我不确定车把，但在
ejs
文件中，我使用了以下内容：

<div>
<% errors.forEach(function (error) { %>
    <p><%= error %></p>       
<% }) %>
</div>




也许在车把上你可以用这样的东西

<div>
  {{#each errors}}
    <p>{{this}}</p>
  {{/each}}
</div>


{{{#每个错误}
{{this}}

{{/每个}}

同样，您应该阅读
connectflash
的工作原理以及使用此模块可以执行的操作。它对于不同类型的消息非常有用，不仅仅是错误消息。
它很简单。只需使用
res.render
通过传递错误消息来呈现所需页面

// Otherwise redirect to get /login
// TODO: Re-render page with error message and 401 status code
res.status(401).render("login/login", { error: "Opps!" })
return

在您的视图中，有一个条件：

<div class="error">
  {{#if error}}
    <p>{{error}}</p>
  {{/if}}
</div>


{{{#如果出错}}
{{error}}

{{/if}
这很简单。只需使用
res.render
通过传递错误消息来呈现所需页面

// Otherwise redirect to get /login
// TODO: Re-render page with error message and 401 status code
res.status(401).render("login/login", { error: "Opps!" })
return

在您的视图中，有一个条件：

<div class="error">
  {{#if error}}
    <p>{{error}}</p>
  {{/if}}
</div>


{{{#如果出错}}
{{error}}

{{/if}