3

I have a web app which uses ui-router for routing. There is a user management module where there are certain roles given to a user (role x, y and z). When a user with role x logs in he will be restricted to certain states of the ui-router e.g. 'dashboard'.

When a user logs in I have saved the user's role in a cookie variable (using $cookie). I also used ng-hide to hide the Dashboard navigation sidebar when user with role x is logged in like this:

HTML:

<li ui-sref-active="active">
   <a ui-sref="dashboard" ng-hide="roleIsX()">
       <i class="fa fa-laptop"></i> <span class="nav-label">Dashboard</span>
   </a>
</li>

Controller:

$scope.roleIsX = function() {

  if ($cookies.get('loggedInUserRole') === "x")
    return true;
  else
    return false;

}

This works okay for now but the problem is when any user logs in he is able to directly navigate to a URL by writing it in the address bar. Is there an easy way I could solve this issue keeping in view my situation?

Sibtain
  • 1,436
  • 21
  • 39
  • You can't stop a browser from browsing, the only thing I could think of is a) everything is done on one page so there are no other addresses or b) you save in the cookie the last page the user was on and on each page you check to make sure they came from the right page or redirect them to the home page. – IfTrue Sep 17 '15 at 12:07
  • If a user with restricted access to a URL enters it, then he should be shown a not allowed page etc. How would I do this in Angular? – Sibtain Sep 17 '15 at 12:10
  • In the controller for that page you could check if they are logged in and check however you are assigning them access then rereoute if they shouldn't be there. – IfTrue Sep 17 '15 at 12:13
  • @Sibtain, angular ui-router allows you to have a feature of resolve. Resolve is just like promise. You can resolve the user access within resolve, and if allowed, return an object, else navigate him to some other page. – ShivangiBilora Sep 17 '15 at 12:14
  • @IfTrue Thanks, I'll try that – Sibtain Sep 17 '15 at 12:16
  • @Shivi Can you give me an example for resolve in this context, sorry I'm a beginner in AngularJS – Sibtain Sep 17 '15 at 12:17
  • @Sibtain: just try going though this documentation for "Resolve"... https://github.com/angular-ui/ui-router/wiki... If you're still unable to understand, I would try explaining it over chat... – ShivangiBilora Sep 17 '15 at 12:21

2 Answers2

3

I eventually used resolve of ui-router as @Shivi suggested. Following is the code if anyone is still looking up:

    app.config(['$urlRouterProvider', '$stateProvider', '$locationProvider',
        function($urlRouterProvider, $stateProvider, $locationProvider){
         ...

        .state('user-management', {
          ...
          ...
          resolve: { 
            roleAuthenticate: function($q, UserService, $state, $timeout) {
              if (UserService.roleIsX()) {
                // Resolve the promise successfully
                return $q.when()
              } else {

                $timeout(function() {
                  // This code runs after the authentication promise has been rejected.
                  // Go to the dashboard page
                  $state.go('dashboard')
                })
                // Reject the authentication promise to prevent the state from loading
                return $q.reject()
              }
            }


          }
        })

This code checks if the roleIsX then continue to the state else open dashboard state.

Helpful Reference: angular ui-router login authentication - Answer by @MK Safi

Community
  • 1
  • 1
Sibtain
  • 1,436
  • 21
  • 39
2

listen to the $locationChangeStart event, and prevent it if needed:

$scope.$on("$locationChangeStart", function(event, next, current) {
    if (!$scope.roleIsX()) {
        event.preventDefault();
    }
});
MoLow
  • 3,056
  • 2
  • 21
  • 41