CODEWITHSUNDEEP
htmlnode.jsejsauth0
Anurag
Anurag

Reputation: 21

How to change the page diaplayed on the same route based on whether the person is logged in or not? I'm using node.js express auth0

If someone visits the site , they are going to be directed towards '/' which will display index page This page has login and signup options.

server.js--


const express = require("express");
const ejs = require('ejs');

const app  = express();

const { requiresAuth } = require('express-openid-connect');
const { auth } = require('express-openid-connect');
app.get('/', (req, res) => {
   res.render('pages/index');
    
});

however , if the person has logged in and wants to view the index page again I want to remove those login and signup links. these links are coded in navigation bar in html, ejs.

index.ejs--


<%- include('../partials/head.ejs') %>

<body>

<%- include('../partials/navbar.ejs') %>

    <form  action="/" method="POST">

        <button class="btn btn-light btn-lg btn-block addPG"> Add New...</button>

    </form>

<%- include('../partials/footer.ejs') %>

    </body>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</html>

I wrote a new index page for those who have logged in but I cant figure a way to do so. Is my approach right or is there a better way to implement the stuff that I desire.

Upvotes: 1

Views: 32

Answers (1)

JacobTheDev
JacobTheDev

Reputation: 13

How I did it in my navbar was with if statements, Below is a snippet of how I have my ejs file

                <%if (user && user.role==2) { %>
                <li class="treeview">
                    <a href="#">
                      <i data-feather="user-check"></i>
                      <span>Admin</span>
                      <span class="pull-right-container">
                        <i class="fa fa-angle-right pull-right"></i>
                      </span>
                    </a>
                    <ul class="treeview-menu">
                      <li><a href="/admin"><i class="icon-Commit"><span class="path1"></span><span class="path2"></span></i>Users</a></li>
                      <li><a href="/recent-devices"><i class="icon-Commit"><span class="path1"></span><span class="path2"></span></i>Recent Devices</a></li>
                    </ul>
                  </li> 
                  <% } %>
                  <% } %>                 
              <%if (!user) { %>
                <li>
                    <a href="/signin">
                      <i data-feather="log-in"></i>
                      <span>Signin</span>
                    </a>
                  </li> 
              <% } %>

That just checks if there is a user, and you can update your HTML to show stuff based on roles and such.

Upvotes: 1

Related Questions