Prevent access to admin pages in AngularJS

Question

I'm wondering what the best approach in AngularJS is to secure admin pages, i.e. pages that normal users shouldn't be able to see. Obviously, there will be back-end authentication but since the AngularJS app is client-side, people could still theoretically look at the routing and go to those URLs directly and look at the admin pages.

I'm using Express, PassportJS & MongoDB (Mongoose) as my backend. Naturally, they wouldn't be able to interact with the admin pages since there is server-side authentication on creation, deletion, ... but I'd much prefer to not even serve the pages to the user if they do not have the proper access. Since the app is fully client-side JS though, I'm thinking this is kind of impossible since people can just modify the routing and whatnot. What's the best way to go about this? Thanks for any input!

Answer 1

I would put a check inside routeProvider. This has to be done for every route which requires authentication. You can even write a separate method and stick it to each route to avoid duplication.

$routeProvider
.when('/profile', {
  templateUrl: 'views/profile.html',
  controller: 'ProfileCtrl',
  resolve: {
    validate: function($q, $location) {
      // Either you could maintain an array of hashes on client side
      // a user do not have access to without login
      // Or hit the backend url to check it more securely
      var validateAccess = $q.defer();
      var isAllowed = ['profile', 'index', 'dashboard'].indexOf($location.hash()) !== -1;

      if (!isAllowed) {
        $location.path('/login');
      }

      validateAccess.resolve();
      return validateAccess.promise;
    }
  }
})
.otherwise({
  redirectTo: '/'
});

Answer 2

This question is a bit old but if anyone is looking for solution out there , I was using a resource file to store my html templates and then retrieve it with webapi while validating permission and returning the html only when user authenticated.