Как я могу перерисовать страницу на экспресс-маршруте с сообщением об ошибке?

Question

Я занимаюсь разработкой простого веб-сайта, который поддерживает функции входа и выхода из системы на основе локального файла JSON со списком пользователей и хэшированными паролями.Я использую экспресс-сессию для своих файлов cookie, чтобы отслеживать, успешно ли пользователь вошел в систему или нет на стороне сервера, и выражать в качестве моего сервера.

На моей странице входа в систему отображается представление login.handlebars.Если пользователь успешно входит в систему с соответствующими учетными данными, страница перенаправляется в / 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
})

Какое наилучшее / наиболее идеальное решение для достижения этой цели?Как это делается на практике со страницами входа в систему, если дополнительно требуется перерисовать страницу?

Answer 1

Все просто.Просто используйте 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>

Answer 2

Вы можете использовать connect-flash , Это промежуточное ПО Flash-сообщений для Express. Я советую вам прочитать немного об этом.

Флэш - это специальная область сеанса, используемая для хранения сообщений. Сообщения записываются на флэш-память и очищаются после отображения на Пользователь. Вспышка обычно используется в сочетании с перенаправлениями, обеспечение доступности сообщения для следующей страницы, которая должна быть оказаны.

Во-первых, в вашем файле 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"), добавьте ваше сообщение об ошибке в объект locals.

// 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")

Последнее, что вам нужно сделать, это добавить errors в ваш логин. Я не уверен насчет руля, но в ejs файлах я использую это:

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

Возможно, в руле вы можете использовать что-то вроде этого

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

Опять же, вы должны прочитать, как работает connect-flash и что вы можете сделать с этим модулем. Это очень полезно для сообщений различного типа, а не только для сообщений об ошибках.