Angular Js Security Issues Role Based Authorisation

Question

I am creating a new Enterprise Application in Angular for my Company. I am very excited about angular but handling Roles on Client side is not working out for me.

Basically I am saving a token when ever the user log's in and before a user could view a page an Authorisation request is sent to the server to get the Role and User details based on the Token.

After authorisation a request to get the data for the page to the server which returns the entire data irrespective of the Role of the user, after that I use ng-switch and render templates according to the Role.

Now the problem here is that I am trying to show and hide data on the Client side so after I recieve the user information I have to keep the Role in some Scope variable or local Storage anywhere on the Client side. But my point here is that if I keep it on Client side I can very easily change the Role and access any data I want.

So should I assume that Angular is not fit for my app where I am trying to display data on client side according to the roles from the server because what I feel is that if user can see your logic and data he can obviously play with it.

This is my View

   <div ng-switch="User.data.Role">
       <div ng-switch-when="Admin">
            <h1>hello you are seeing your dashboard Admin</h1>
        </div>

        <div ng-switch-when="Manager">
            <h1>hello you are seeing your dashboard Manager</h1>
        </div>
    </div>

Here is how I fill User variable in Controller

app.controller('dashoBoardController',  ['$scope','UserService', function ($scope, UserService) {

    $scope.authentication = UserService.authentication;
    $scope.User = UserService.fillAuthData();
    console.log($scope.User);
    $scope.Greeting = "Welcome! to your Dashboard";



}]);

This is the Service method

   var _fillAuthData = function () {

        var authData = SessionService.get('user');

        if (authData) {
            _authentication.isAuth = true;
            _authentication.data = authData;

        }

        console.log(_authentication);
        return _authentication;
    }

Session Service is getting the User data from server on the basis of token. As you can see since the view is so descriptive changing the role in authData is not a big deal.

Please help me if there is a work around for this. I really wanted to this project in Angular.

Answer 1

If the web service (run on the server) returns data to the client that the authenticated user is not authorized to access, then the web service (server side) has a security flaw. There is no way you can fix that client/browser side, regardless of which client side framework you decide to chose. AngularJS is probably fine for whatever you want to do in the browser, but your web service is broken.