登录中间件与 Passport.js 一起抛出 "variable is not defined" 错误

Question

我目前正在学习 Colt Steele 在 Udemy 上的 Node.js 课程，我遇到了一个我不知道如何修复的错误。更具体地说，每当我尝试使用正确的凭据登录我的 Web 应用程序时，就会发生此错误（对于错误的凭据，它工作正常）。

这是堆栈跟踪：

ReferenceError: ...\The Web Developer Bootcamp[=12=] YelpCamp\views\layouts\boilerplate.ejs:20
    18| 

    19| <main class="container mt-5">

 >> 20|     <%- include('../partials/flash') %>

    21|     <%- body %>

    22| </main>

    23| 


...\The Web Developer Bootcamp[=12=] YelpCamp\views\partials\flash.ejs:1
 >> 1| <% if(success && success.length) { %>

    2|     <div class="alert alert-success alert-dismissible fade show" role="alert">

    3|         <%= success %>

    4|             <button type="button" class="close" data-dismiss="alert" aria-label="Close">


success is not defined
    at eval (eval at compile (...\The Web Developer Bootcamp[=12=] YelpCamp\node_modules\ejs-mate\node_modules\ejs\lib\ejs.js:652:12), <anonymous>:10:8)
    at flash (...\The Web Developer Bootcamp[=12=] YelpCamp\node_modules\ejs-mate\node_modules\ejs\lib\ejs.js:682:17)
    at include (...\The Web Developer Bootcamp[=12=] YelpCamp\node_modules\ejs-mate\node_modules\ejs\lib\ejs.js:680:39)
    at eval (eval at compile (...\The Web Developer Bootcamp[=12=] YelpCamp\node_modules\ejs-mate\node_modules\ejs\lib\ejs.js:652:12), <anonymous>:15:17)
    at boilerplate (...\The Web Developer Bootcamp[=12=] YelpCamp\node_modules\ejs-mate\node_modules\ejs\lib\ejs.js:682:17)
    at tryHandleCache (...\The Web Developer Bootcamp[=12=] YelpCamp\node_modules\ejs-mate\node_modules\ejs\lib\ejs.js:254:36)
    at Object.exports.renderFile (...\The Web Developer Bootcamp[=12=] YelpCamp\node_modules\ejs-mate\node_modules\ejs\lib\ejs.js:485:10)
    at renderFile (...\The Web Developer Bootcamp[=12=] YelpCamp\node_modules\ejs-mate\lib\index.js:227:7)
    at ...\The Web Developer Bootcamp[=12=] YelpCamp\node_modules\ejs-mate\lib\index.js:282:7
    at tryHandleCache (...\The Web Developer Bootcamp[=12=] YelpCamp\node_modules\ejs-mate\node_modules\ejs\lib\ejs.js:260:5)
    at Object.exports.renderFile (...\The Web Developer Bootcamp[=12=] YelpCamp\node_modules\ejs-mate\node_modules\ejs\lib\ejs.js:485:10)
    at View.renderFile [as engine] (...\The Web Developer Bootcamp[=12=] YelpCamp\node_modules\ejs-mate\lib\index.js:227:7)
    at View.render (...\The Web Developer Bootcamp[=12=] YelpCamp\node_modules\express\lib\view.js:135:8)
    at tryRender (...\The Web Developer Bootcamp[=12=] YelpCamp\node_modules\express\lib\application.js:640:10)
    at Function.render (...\The Web Developer Bootcamp[=12=] YelpCamp\node_modules\express\lib\application.js:592:3)
    at ServerResponse.render (...\The Web Developer Bootcamp[=12=] YelpCamp\node_modules\express\lib\response.js:1012:7)

这是导致错误的代码：

router.post('/login', passport.authenticate('local', { failureFlash: true, failureRedirect: '/login' }), async (req, res) => {
    req.flash('success', 'Welcome back!');
    res.redirect('/campgrounds');
});

如果您需要来自 boilerplate.ejs 和 flash.ejs 的代码，这里是：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl"
          crossorigin="anonymous">
</head>

<body class="d-flex flex-column vh-100">

<%- include('../partials/navbar') %>

<main class="container mt-5">
    <%- include('../partials/flash') %>
    <%- body %>
</main>

<%- include('../partials/footer') %>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"
        integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
        integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
        crossorigin="anonymous"></script>
<script src="/js/hello.js"></script>
<script src="/js/validateForms.js"></script>
</body>

</html>

<% if(success && success.length) { %>
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <%= success %>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
<% } %>

<% if(error && error.length) { %>
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <%= error %>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
<% } %>

最让我困惑的是，之前所有的东西（关于 connect-flash 包）都工作得很好，我从来没有遇到过这样的错误。在注册任何路由之前，我在 res.locals 中包含了 'success' 和 'error' 变量。

这是我已经尝试过的方法：

删除 passport.authenticate(...) 函数会导致 'success' 闪现消息按预期显示（当然，身份验证已消失），
将我的代码与讲师 (https://github.com/Colt/YelpCamp/blob/291b1146dfd2e0449b90aed6c3b20cdeda8a0485/routes/users.js) 上传到 Github 的代码进行了比较
将 passport、passport-local 和 passport-local-mongoose 降级到课程中使用的版本并没有解决问题

Answer 1

我通过添加这一行设法解决了问题：

passport.deserializeUser(User.deserializeUser());

之后

app.use(session(sessionConfig));
app.use(flash());
app.use(passport.initialize());
app.use(passport.session());
passport.use(new LocalStrategy(User.authenticate()));
passport.serializeUser(User.serializeUser());

登录中间件与 Passport.js 一起抛出 "variable is not defined" 错误

Login middleware throws a "variable is not defined" error in conjunction with Passport.js

node.js

passport.js

ejs

connect-flash