Claims-Based Authorization with Angular.JS and WIF

Question

We have an application built with ASP.NET MVC 5. For that application, we've built several URL-related HTML helpers that act like this:

Imagine there is an anchor that leads to certain URL, i.e. /Customer/Edit/5. We have a helper that will in the background ask ClaimsAuthorizationManager (which is part of Windows Identity Foundation API) whether the current user can perform action Edit on resource Customer. If yes, HTML markup for anchor tag will be rendered. Otherwise, nothing will be rendered.

With these helpers, we've been able to have dynamic website based on background policies that define URL's user can access based on specific claims.

Now we need to push the same logic to AngularJS based SPA.

So again, goal is to skip rendering of URL-related HTML if user is not allowed to access that particular URL.

I've not been able to find any good resources on how to perform this kind of authorization with AngularJS.

Is there a proper way to do this or should I go with some custom logic? Are there any good references that I can read on?

Answer 1

Angular works great in RESTful applications. In your case, you could set up your app to fetch your claims as JSON and set your angular template to render accordingly.

But you can also use MVC's helper methods on partial views and use those partials as templates for your angular application. So when your angular app fetches the html template at foo/bar/baz (via route or ng-include or directive template or whatever), your html template will come back with the MVC partial view instead of a static html file. It's a little dirty, but it works in a pinch.