I have an expressjs app with angularjs on the frontend, and i'm serving jade out of express, i.e.
app.set('view engine', 'jade');
I'm also using jade partials with angular. The app is based off the Yeoman angular fullstack generator.
Here's a link to the navbar.html partial from the generator's demo app for reference (except I am using Jade)
I inject the current logged in user server-side into the template engine via express middleware to add it to res.locals so it is available in the template at runtime, e.g.
app.get('/partials/*', function(req, res, next) {
res.locals.user = req.user; next();
}, index.partials);
Now, this app has user roles, let's assume there are two: ['user', 'admin']
, and I wanted to conditionally output the markup from navbar.jade
depending on the current user's role.
For example, something like this (admin users should only see admin menu item):
ul.nav
if user
li
a(href='/settings')
if (user && user.role == 'admin')
li
a(href='/admin')
I know I can ng-hide / ng-show
these links cient side with Angular, but I'd prefer to not even output the markup if the user shouldn't have the authorization to use them (they are protected server-side as well.)
So, this approach kinda works. If I login with a normal user, the navbar is fine, then I logout, and re-login as an admin user, but the browser makes a request for navbar.html, and ExpressJS returns a 304 Not Modified
, so the content is stale. If I refresh/F5, it returns the proper version based on the user's role (i.e. the unbuffered Jade JavaScript is interpreted on the refresh).
I'm trying to figure out how to force it. I can experiment with cache-control headers and Etag disablement hackery, but I'm trying to resolve a clean way to fix this.