Implement Authorization in AngularJS

Question

I want to implement authorization in AngularJS. In my project which is some kind of social media, different roles or even same roles may see a view file differently.

For example imagine we have two different roles: customer and company.

A customer and a company may have different things in a shared view file, for example a company can have rate on his profile while a customer can't. (different roles).

Or a customer may see a button in a page while another customer can't. (same roles)

As you can see I can't implement authorization by simply checking the roles, and in some situations I need to communicate to the server.

I have multiple choices:

• Create a variable in my controller's scope with corresponding permissions, which they have default value of false:

  $scope.auth = { canRate: false, isConnected: false };

  Then connect to server and change the value of auth object based on the response. And use ng-if in my view files to show or hide elements.

• Create a directive and pass comma-separated permissions to it.

  <button auth="canRate,isConnected"></button>

  Then connect to server to check the permissions. If all of them where true, then show the element.

• Use resolve: {...} and get all necessary data from the server when routing, which increases loading time of each page.

I want to know is there a better approach to solve this problem? Any kind of help or comment would be greatly appreciated.

Note: Of course I have server side authentication and authorization! I just want to show some elements in a view file based on user roles or some other conditions which I explained. And this elements are something like a button or a link, otherwise instead of using a shared view and hiding elements, I could use different views for each situation.

Any how, I know this approaches are for display purposes only, and they can not solve security challenges.

Answer 1

First things first, I LOVE AngularJS. But, like all web client frameworks, in a strict sense you can't implement Authorization in AngularJS.

You can not trust the web client to hide data from the user. If the server sends the data to the client, they can still find a way to see it (using fiddler for example) even if you use ng-hide to avoid displaying it.

So, you must implement Authorization on the server side. Now then, assuming you do that:

AngularJS is great for building dynamic web interfaces based on the data you receive from the server. So, your server should only send the data your client is allowed to see. Then, you can use ng-hide or ng-if to avoid displaying the components that would otherwise show that data.

Furthermore, your server can even send an object that contains the list of possible actions available to the user. And then you could use ng-hide in your buttons so as not to show them when the action isn't available.

Even still, you will need to code your server side to ignore actions that the user isn't allowed to take.

Answer 2

Your approach will work, but it is not secure. I would make sure that the server handles the authentication as well. Personally, I've always used a server-side token based authentication system when working with AngularJS.

Instead of using ng-if, you should make your GET or POST requests require the token given on login. From there the server can determine whether or not to allow the request to succeed, with no chance of the user faking credentials. Both of your examples work fine, but use them as a means to hide things for display purposes only. The web client will NOT keep sensitive information safe or prevent the possibility of POST requests from unwanted users.