Angular: Multiple templates for single URL?

Question

I have a 'manager' panel which is used by users of all roles (admin and user currently).

The main problem is that I want to restrict any admin HTML views from being loaded (I will do this as a simple check on the backend, and will return 401 if they're not authorized to load the template). There are a bunch of things in the HTML I need to hide.

My problem is that means there are now 2 views for several sections.

So /settings while a user will show an entirely different view as /settings when you're an admin.

The controller will actually be shared, because the controller code is very close, but the HTML is very different.

I am currently using angular-router but I also checked out ui-router, I just have no clue how to structure either. I've spent a good bit of time looking at UI router, and while it is amazing looking I don't know the best way to lay it out.

I have about 10 routes/views that need to belong to each role, that will be different.

tungd · Accepted Answer · 2015-11-16 06:09:21Z

1

How about emitting a global variable says the current user is admin:

<script type="text/javascript">window.isAdmin = true</script>

And then in the route definition check for that variable:

...
when('/setting', {
  templateUrl: isAdmin ? 'templates/admin/setting.html' : 'templates/user/setting.html',
  controller: 'SettingController'
})
...

The other way around is to have the web server serve different view for the same view URL, based on user's role. As I understand you can do this already, right?

app.get('/templates/setting.html', function(req, res) {
  if (user.role === "admin") {
    res.send(...);
  } else {
    res.send(...);
  }
});

answered Nov 16, 2015 at 6:09

tungd

15k6 gold badges43 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tallboy Over a year ago

Is there a way to do it in angular without a separate global variable. Like from a response header in a response interceptor?

Tallboy Over a year ago

yes the only problem is i need to set the global variable in the interceptor or in a service which checks the headers of every response, but I can't inject that into app.config

tungd Over a year ago

the routes are defined before the app is bootstrapped, so response header is probably too late. You can do the second way (conditional response for the same URL). How do you distinguish admin/normal user currently?

Collectives™ on Stack Overflow

Angular: Multiple templates for single URL?

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related