如何使用节点，EJS，通行证和会话有条件地从两个导航栏选择中渲染？

Question

如何使用节点，EJS，通行证和会话有条件地从两个导航栏选择中渲染？

我想有条件地从2个导航栏选择中进行渲染。我正在使用EJS，护照和会议。我尝试了几件事，但没有任何效果。目的是如果客户端未通过身份验证，则呈现“登录”导航栏；如果客户端已通过身份验证，则使用选项卡的其余部分显示带有选项的导航栏。我在此发布了许多代码，这些代码是我在Brad Traversy的视频“具有Passport身份验证的Node.js |完整项目”（顺便说一句...感谢Brad。大粉丝！）我相信我已经接近nav-bar文件中的解决方案。我只需要一个真正知道他在做什么（我不知道）的人的帮助。如果你们中的一个好人可以看一下下面的文件并告诉我我所缺少的内容，我将不胜感激。看来Tiger Abrodi已经问过同样的问题，并且由Discord小组解决（请参见How can i conditionally render the navbar using ejs）。但是，未显示答案。我认为这是一个非常有用的解决方案，应该将其发布在此处，以供其他人使用，因此，我保证您的解决方案将保留在此处，以供其他人查看。谢谢你们！我的主页；您可以看到我使用“ include”调用导航栏，并且可以使用。

<!-- Navigation Bar ----------------------------------->
<%- include('assets/nav-bar'); %>

<!--------- Main Body --------->
<div class="mainBodyContainter mBC2">
    <h3>Busca por Marca:</h3>
    <ul>
        <li>Marca</li>
        <li>Año</li>
        <li>Modelo</li>
        <li>Sub-Modelo</li>
    </ul>
    <button class="button">Buscar</button>
</div>

<!-- Right  ***  Anuncio -->
<%- include ('assets/main-ad') %>

<!----------------- Footings ----------------->     
<%- include ('assets/footings') %>

我的导航栏；问题：此决策无法正常进行，因为它一直将用户视为未定义。通过检查下面包含的我的信息中心，我可以验证用户是否已成功通过身份验证。

<!-- -- Navigation Bar Decision -->
<% if (typeof user === 'undefined') { %>
<!---- Navigation Bar NON AUTHENTICATED CLIENT -------->
<div id="navBarHTML">
    <nav>
        <ul>
            <li><a href="#">Ayuda</a></li>
            <li><a href="/users/register">Registrate</a></li>
            <li><a href="/users/login">Acceso</a></li>
            <li><a href="/">Inicio</a></li>
        </ul>
    </nav>
</div> 
<% } else { %>
<!---- Navigation Bar AUTHENTICATED CLIENT------------->
<div id="navBarHTML">
    <nav>
        <ul>
            <li><a href="#">Ayuda</a></li>
            <li><a href="#">Notificaciones</a></li>
            <li><a href="#">Mis Publicaciones</a></li>
            <li><a href="/users/logout">Salir</a></li>
            <li><a href="/">Inicio</a></li>
            <li><a>Bienvenido <%= name %></a></li>
        </ul>
    </nav>
</div>
<% } %>

仪表板

<h1>Dashboard</h1>
<br>
<p>Bienvenido <%= name %></p>
<br>
<a href="/users/logout">Logout</a>

我的index.js;它将用户名输入我的仪表板，并且可以正常工作！

const express = require('express');
const router = express.Router();
const { ensureAuthenticated } = require('../config/auth');

// Home page
router.get('/', (req, res) => res.render('home'));


// Dashboard ***PROTECTED FOR NO ACCESS UNLESS LOGGED IN***
router.get('/dashboard', ensureAuthenticated, (req, res) => 
    res.render('dashboard', {
        name: req.user.name
    }));

module.exports = router;

我的app.js;它工作正常。

const express = require('express');
const expressLayouts = require('express-ejs-layouts');
const mongoose = require('mongoose');
const app = express();
const db = mongoose.connection;
const flash = require('connect-flash');
const session = require('express-session');
const passport = require('passport');

// Passport config
require('./config/passport') (passport);

// Connect to Mongo
mongoose.set('useNewUrlParser', true);
mongoose.set('useUnifiedTopology', true);
mongoose.connect('mongodb://localhost/eyonke_server')
    .then(() => console.log('La base de datos de MongoDB conectó correctamente...'))
    .catch(err => console.log(err));

// EJS
app.use(expressLayouts);
app.set('view engine', 'ejs');
app.use(express.static(__dirname + '/views'));

// Bodyparser
app.use(express.urlencoded({ extended: false }));

// Express session middleware
app.use(session({
    secret: 'secret',
    resave: true,
    saveUninitialized: true,
  }));

// Passport middleware
app.use(passport.initialize());
app.use(passport.session());

// Connect flash
app.use(flash());

// Global Variables
app.use((req, res, next) => {
    res.locals.success_msg = req.flash('success_msg');
    res.locals.error_msg = req.flash('error_msg');
    res.locals.error = req.flash('error');
    next();
});

// Routes
app.use('/', require('./routes/index'));
app.use('/users', require('./routes/users'));

const PORT = process.env.PORT || 5000;

app.listen(PORT, console.log(`El servidor de eYonke esta corriendo en el puerto numero ${PORT}...`));

我的护照配置；工作正常！

const LocalStrategy = require('passport-local').Strategy;
const mongoose = require('mongoose');
const bcrypt = require('bcryptjs');

// Load User model
const User = require('../models/User');

module.exports = function(passport) {
    passport.use(
        new LocalStrategy({ usernameField: 'email'}, (email, password, done) => {
            //Match user
            User.findOne({ email: email })
                .then(user => {
                    if(!user) {
                        return done(null, false, { message: 'Email no registrado' });
                    }
                    // Match password
                    bcrypt.compare(password, user.password, (err, isMatch) => {
                        if(err) throw err;

                        if(isMatch) {
                            return done(null, user);
                        } else {
                            return done(null, false, { message: 'Contraseña incorrecta' });
                        }
                    });
                })
                .catch(err => console.log(err));
        })
    );

    // Session
    passport.serializeUser((user, done) => {
        done(null, user.id);
    });

    passport.deserializeUser((id, done) => {
        User.findById(id, (err, user) => {
            done(err, user);
        });
    });
}

auth.js;工作正常！

module.exports = {
    ensureAuthenticated: function(req, res, next) {
        if(req.isAuthenticated()) {
            return next();
        }
        req.flash('error_msg', 'Necesitas entrar a tu cuenta para accesar este recurso');
        res.redirect('/'); /*if not authenticated, then redirected to home page*/
    }
}

我的users.js用于注册和登录/注销；工作正常！

const express = require('express');
const router = express.Router();
const bcrypt = require('bcryptjs');
const passport = require('passport');

//User model
const User = require('../models/User');

//Login page
router.get('/login', (req, res) => res.render('login'));

//Registration page
router.get('/register', (req, res) => res.render('register'));

// Register Handle
router.post('/register', (req, res) => {
    const { name, email, password, password2 } = req.body;
    let errors = [];
    //Check for errors
    //Check required fields
    if(!name || !email || !password || !password2) {
        errors.push({ msg: 'Por favor llena todos los campos'});
    }
    // Check passwords match
    if(password !== password2) {
        errors.push({ msg: 'Las contraseñas no son iguales'});
    }
    // Check password length
    if(password.length < 6) {
        errors.push({ msg: 'La contraseña debe tener al menos 6 caracteres'});
    }
    if(errors.length > 0) {
        res.render('register', {
            errors,
            name,
            email,
            password,
            password2
        });
    } else {
        // Validation passed
        User.findOne({ email: email })
            .then(user => {
                if(user) {
                    // User exists
                    errors.push({ msg: 'Email ya está registrado en eYonke'});
                    res.render('register', {
                        errors,
                        name,
                        email,
                        password,
                        password2
                    });
                } else {
                    const newUser = new User({
                        name,
                        email,
                        password
                    });
                    // Hash Password
                    bcrypt.genSalt(10, (err, salt) =>
                        bcrypt.hash(newUser.password, salt, (err, hash) => {
                            if(err) throw err;
                            // set password to hashed
                            newUser.password = hash;
                            // Save user
                            newUser.save()
                                .then(user => {
                                    req.flash('success_msg', 'Te has registrado exitosamente');
                                    res.redirect('/users/login');
                                })
                                .catch(err => console.log(err));
                        }))

                } 
            });
    }
});

// Login handle
router.post('/login', (req, res, next) => {
    passport.authenticate('local', {
        successRedirect: '/', /*'/dashboard',*/
        failureRedirect: '/users/login',
        failureFlash: true
      })(req, res, next);
});

// Logout handle
router.get('/logout', (req, res) => {
    req.logOut();
    req.flash('success_msg', 'Tu sessión ha terminado');
    res.redirect('/');
});

module.exports = router;

Answer 1

我能够找到Tiger A.，他好心地帮助我解决了这个问题。我对代码所做的更改如下：

1.-在app.js中，我添加了如下全局变量：

app.use((req, res, next) => {
res.locals.user = req.user;
next();

}）;

2.-在我的导航栏中，我将决策行替换为以下内容：

<% if (!user) { %>

然后就成功了。现在，我可以根据用户是否通过身份验证来决定使用哪个导航栏。