ログイン時にヘッダーメニューの内容を変更したい

Question

Node.jsとExpressを使ってログイン認証機能を実装しています。

ログイン判定時に画面上部のヘッダーにマイページとログアウトのリンクが出るようにしたいです。

テンプレートエンジン（hbs）を使っているので、header.hbsの内部でif文を使って分岐させればよいと思うのですが、クライアント側からログイン判定をする方法がわかりません。

ログイン認証にはPassport.jsのローカルストラテジを使用しています。

アドバイスを頂けると嬉しいです。

const express = require('express');
const path = require('path');
require('./db/mongoose');
const hbs = require('hbs');
const session = require('express-session');
const passport = require('passport');

const app = express();
const port = process.env.PORT || 3000;

const publicDirectoryPath = path.join(__dirname, '../public');
const viewsPath = path.join(__dirname, '../templates/views');
const partialsPath = path.join(__dirname, '../templates/partials');

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

app.set('view engine', 'hbs');
app.set('views', viewsPath);
hbs.registerPartials(partialsPath);

app.use(express.static(publicDirectoryPath));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.use(session({
  secret: 'hogehoge',
  resave: false,
  saveUninitialized: false,
}));

app.use(passport.initialize());
app.use(passport.session());

passport.use(User.createStrategy());

passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());

app.listen(port, () => {
  console.log(`Server is up on port${port}`);
});

app.get('/', (req, res) => {
  res.render('home');
});

app.get('/register', (req, res) => {
  res.render('register');
});

app.get('/login', (req, res) => {
  res.render('login');
});

app.get('/home', (req, res) => {
  if (req.isAuthenticated()) {
    res.render('home');
  } else {
    res.redirect('/init');
  }
});

app.post('/register', async (req, res) => {
  const { username, gender } = req.body;

  try {
    await User.register({ username, gender }, req.body.password);
  } catch (e) {
    res.status(400).send(e);
  }

  passport.authenticate('local')(req, res, () => {
    res.render('home');
  });
});

app.post('/login', async (req, res) => {
  const user = new User(req.body);

  req.login(user, (err) => {
    if (err) {
      res.status(400).send();
    } else {
      passport.authenticate('local')(req, res, () => {
        res.render('home');
      });
    }
  });
});

Answer 1

const auth = (req, res, next) => {
  if (!req.isAuthenticated()) {
    res.locals.loginState = false;
    res.render('init');
    return;
  }
  res.locals.loginState = true;
  next();
};

module.exports = auth;

<ul class="navbar-nav ml-auto">
      {{#if loginState}}
      <li class="nav-item">
        <a class="nav-link" href="/profile">プロフィール</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/logout">ログアウト</a>
      </li>
      {{else}}
      <li class="nav-item">
        <a class="nav-link" href="/register">新規登録</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="/login">ログイン</a>
      </li>
      {{/if}}
</ul>   

ログイン判定用のミドルウェアを作成して、res.locals変数にログイン状態を保存することで、view側からログイン状態を参照することができました。