Client Side Template with view per role

Question

I've been reading about AngularJS and it seems very promising, the only thing I'm trying to figure out, not specific for framework, but it's general for client-side template.

Let's say you have a web application with multiple roles, each role may contain addition feature,,, so you cannot have different template for each role, that would be considered bad practice, so my question is what's the best approach to use client-side template in the mean time, not exposing your template to client, so for example, in AngularJS I don't have to use ng-show? What best tool to generate template at server side?

Answer 1

You're going to want to filter that medical data server-side, then display accordingly in Angular. ng-show and ng-hide simply toggle the display of elements that still exist in the DOM. In other words, that (I'm assuming) HIPAA-protected data is just sitting there where anyone could "view source" it.

Even if you did come up with a way to outright remove those DOM elements you didn't want to display based on roles, it doesn't matter, because you've still technically transferred that data to the client, and a savvy wrong-doer will simply sniff packets and get the protected data.

In fact, ALL of your security and role-checking should be done on the server. You can't trust a JavaScript app to do that on the client at all, in any JS framework, Angular or not.

As for hiding fields based on a role, (presumably because you've got no data to display in those fields), ng-show or ng-hide will be your friends. Occasionally ng-switch will do. If you have a situation where you need a completely different template for some reason, then I'd go with an ng-switch with custom directives in each case, which would allow you to template out what was underneath each role.

I hope that helps.

Answer 2

Blesh is correct about only providing data to users with the appropriate role on the server side, but it sounds like you want to re-use pieces of your client UI.

In AngularJS, you could use ng-include and build up different partials for different pieces of data. So you could write something like this in both your "doctor" and "nurse" views:

<div ng-include="'allergies.html'"></div>

And then have a separate HTML file called allergies.html:

<p>Allergy info: {{someData}}</p>

Another option would be to use directives.