NodeJS 登录后在导航栏中显示用户名

xytpbqjk  于 11个月前  发布在  Node.js
关注(0)|答案(1)|浏览(110)

我正在努力使用户名显示后,登录在导航栏。
当我用正确的用户名和密码登录时,我只是被重定向到页面。但导航栏没有任何变化。有人能帮助我一些提示我应该做什么吗?感觉我已经尝试了一切,看不到问题:(
Navbar.ejs:

<nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light position-fixed w-100 fixed-top">
        <div class="container-fluid">
            

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="/">Home</a>
            </li>
            
            <% if (typeof user !== 'undefined' && user) { %>
                <li class="nav-item">
                  <span class="nav-link">Welcome, <%= user.username %></span>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/logout">Logout</a>
                </li>
              <% } else { %>
                <li class="nav-item">
                  <a class="nav-link" href="/login">Sign in</a>
                </li>
              <% } %>
              

        </ul>
    </div>
</nav>

字符串
Login.js:

var express = require('express');
var router = express.Router();
const fs = require("fs")
const path = require("path")
var passport = require('passport')
var LocalStrategy = require('passport-local');

passport.serializeUser(function(user, cb) {
  process.nextTick(function() {
    cb(null, { id: user.id, username: user.username });
  });
});

passport.deserializeUser(function(user, cb) {
  process.nextTick(function() {
    return cb(null, user);
  });
});

passport.use(new LocalStrategy(function verify(username, password, cb) {
    let usersArray = JSON.parse(fs.readFileSync(path.resolve(__dirname, "../data/users.json")));
    let filteredArray = usersArray.filter(x => x.username == username); 
    if (filteredArray.length > 0) {
      let usersData = filteredArray[0];
      if (usersData.password == password) {
        return cb(null, usersData);
      }
    }
    return cb(null, false);
  }));
  
  router.post('/password', passport.authenticate('local', {
    successReturnToOrRedirect: '/memes',
    failureRedirect: '/login'
  }));
  

  router.get('/', function(req, res, next) {
    if(!req.user) {
      res.render('login', {user: null});
    }
    else {
      res.render('login', {user: req.user});
    }
  });

  router.post('/logout', function(req, res, next) {
    console.log(req.user); // Ensure req.user is defined
    req.logout(function(err) {
        if (err) { return next(err); }
        res.redirect('/login');
    });
});

  
  module.exports = router;

rkttyhzu

rkttyhzu1#

如果你只检查falsy而不显式检查未定义的值,那么你可以通过检查

<% if (!user) { %>
     <li class="nav-item">
      <a class="nav-link" href="/login">Sign in</a>
       </li>        
      <% } else { %>
       <li class="nav-item">
       <span class="nav-link">Welcome, <%= user.username %> 
  </span>
        </li>
         <li class="nav-item">
         <a class="nav-link" href="/logout">Logout</a>
          </li>
          <% } %>

字符串
{no user might be server error or authentication failed}现在这将做的是它将检查所有的false条件,如果任何false条件满足,那么你将其转换为true,所以make并不显示它,然后在else块中尝试访问user.username
试试这个然后告诉我

相关问题