javascript - 使用 res.locals.user 在所有前端 View 中显示用户对象

Question

我正在尝试使用 res.locals.user 在前端显示 user 对象。

下面您可以在我的主 app.js 文件中看到我创建的中间件:

...    
const passport = require('passport')

const auth = require('./routes/auth')
const index = require('./routes/index')

const app = express()

// view engine setup
app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'pug')
app.use(logger(process.env.LOG_ENV))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
  extended: false,
}))
app.use(express.static(path.join(__dirname, '/../public')))
app.use(cookieParser())

app.use(session({
  secret: 'super-mega-hyper-secret',
  resave: false,
  saveUninitialized: true,
}))
app.use(passport.initialize())
app.use(passport.session())
app.use((req, res, next) => { //This middleware checks the local user
  res.locals.user = req.user
  next()
})
...

我的护照文件如下所示:

const passport = require('passport')
const LocalStrategy = require('passport-local').Strategy
const serviceAuth = require('../service/auth')

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

passport.deserializeUser(async(id, done) => {
  const user = await serviceAuth.findById(id)
  done(null, user)
})

// Sign in with username and Password
passport.use('local', new LocalStrategy({
  usernameField: 'username',
}, async(username, password, done) => {
  const user = await serviceAuth.signin(username, password)
  done(null, user)
}))


/**
 * Login Required middleware.
 */
exports.isAuthenticated = (req, res, next) => {
  if (req.isAuthenticated()) {
    res.locals.user = req.session.user
    return next()
  }
  res.redirect('/')
}

但是，当尝试在我的 pug View 中显示 user 对象时，出现以下错误:

TypeError: /home/ubuntu/workspace/src/views/includes/_sidebar.pug:6
    4|          .user-panel
    5|                  .pull-left.info
  > 6|                          p= user.name
    7|                          p= user.role
    8| 
    9|          // Sidebar Menu

Cannot read property 'name' of undefined

在我正确登录用户后，为什么用户对象在 View 中不可用，有什么建议吗？

Answer 1

编辑[1]您的应用程序中需要 2 个入口 View :

1. 用户经过身份验证的索引
2. 案例用户的loginPage未经过身份验证

您也可以在主视图(index)中处理这两种情况，但您需要根据currentUser的存在来显示/隐藏元素。但我发现单独的 View 更干净。

第 1 步 - 添加身份验证中间件:

const isAuthenticated = require('./path/to/isAuthenticated');
app.use(isAuthenticated)

第 2 步 - 渲染您的应用根目录 / (在注册身份验证中间件后执行此操作非常重要，以便您的 res.locals.user已填充):

app.get('/', function(req, res){
    if(res.locals && res.locals.user){
        res.render('index', { currentUser: res.locals.user });
    } else {
        res.render('loginPage');
    }            
});

第 3 步 - 将注入(inject)的用户添加到 index.pug 中的 window:

if !!currentUser
    script.
        window.currentUser = !{currentUser}