Edge.js view engine conditionals not working properly

19 views Asked by At

I am building a blog application based on tutorial text.

I follow this tutorial step-by-step and everything else works as supposed but making the navigation in layout to show different items based on the condition if user is authenticated or not, is not working.

In index.js I add this code like in tutorial.

app.use('*', (req, res, next) => {
    edge.global('auth', req.session.userId)
    next()
});

In layout (app.edge) I add this code like it was said in tutorial.

@if(!auth)
<li class="nav-item">
<a class="nav-link px-lg-3 py-3 py-lg-4" href="/auth/login">Login</a>
</li>
<li class="nav-item">
<a class="nav-link px-lg-3 py-3 py-lg-4 href="/auth/register">Register</a>
</li>
@else
<li class="nav-item">
<a class="nav-link px-lg-3 py-3 py-lg-4" href="/auth/logout">Logout</a>
</li>
@endif

In browser it always shows "login" and "register" instead of "logout" in navigator neverthless if req.session.userId is "undefined" in case user is not logged in, or in case it has a value when user is logged in.

I am stuck with this after hours of googleing. What should I do to fix this?

Full code of index.js

const path = require('path');
const expressEdge = require('express-edge');
const express = require('express');
const { default: edge } = require('edge.js');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cookieParser  = require('cookie-parser'); 
const fileUpload = require('express-fileupload');
const expressSession = require('express-session');
const MongoStore = require('connect-mongo');
const auth = require("./middleware/auth");
const redirectIfAuthenticated = require('./middleware/redirectIfAuthenticated');

const homePageController = require('./controllers/homePage');
const createPostController = require('./controllers/createPost');
const getPostController = require('./controllers/getPost')
const createUserController = require("./controllers/createUser");
const storeUserController = require('./controllers/storeUser');
const loginController = require("./controllers/login");
const loginUserController = require('./controllers/loginUser');
const logoutController = require("./controllers/logout");

const Post = require('./database/models/Post');

const app = new express();

mongoose.connect('MONGOURIhiddenfromyou', { useNewUrlParser: true })
    .then(() => console.log('You are now connected to Mongo!'))
    .catch(err => console.error('Something went wrong', err))

app.use(cookieParser('secret'));

app.use(expressSession({
    secret: 'secret',
    resave: true,
    saveUninitialized: false,
    store: MongoStore.create({
        mongoUrl: 'mongodb://MONGURIhiddenfromyou',
        autoRemove: 'interval',
        autoRemoveInterval: 60 * 24 // In minutes. Default
    })
}));

app.use(fileUpload());
app.use(express.static('public'));
app.use(expressEdge);
app.set('views', __dirname + '/views');
// Only Display Login and Register links to guests
edge.GLOBALS.lol = 'hehe';
app.use('*', (req, res, next) => {
    edge.global('auth', req.session.userId)
    next()
});
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({
    extended: true
}));

const storePost = require('./middleware/storePost');
app.use('/posts/store', storePost);
app.get("/", homePageController);
app.get("/post/:id", getPostController);
app.get("/posts/new", auth, createPostController);
app.get('/auth/login', redirectIfAuthenticated, loginController);
app.post('/users/login', redirectIfAuthenticated, loginUserController);
app.get("/auth/register", redirectIfAuthenticated, createUserController);
app.post("/users/register", redirectIfAuthenticated, storeUserController);
app.get("/auth/logout", logoutController);
app.post("/posts/store", auth, async (req, res) => {
    const {
        image
    } = req.files

    await new Promise((resolve, reject) => {
        image.mv(path.resolve(__dirname, 'public/posts', image.name), (error) => {
            if (error) {
                reject(error);
            } else {
                resolve();
            }
        });
    });

    const post = await Post.create({
        ...req.body,
        image: `/posts/${image.name}`
    });

    res.redirect('/');
});
app.get('/about.html', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'pages/about.html'));
});
app.get('/contact.html', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'pages/contact.html'));
});
app.get('/post.html', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'pages/post.html'));
});


app.listen(5000, () => {
    console.log('App listening on port 5000')
});
0

There are 0 answers