Anoop.P.A Anoop.P.A - 1 year ago 108
AngularJS Question

How to restrict access to pages when using Angular and Strongloop?

Strongloop/loopback has built-in ACL to restrict access to properties and functions. My question is, when using AngularSDK, is there a proper way to restrict access to pages?

How can the authorization status be checked in the front-end? I'm using ui-router.

Answer Source

Check the AngularSDK Handling 401 Unauthorized section of the docs. You can set up a handler to detect when an API call returns a 401 Unauthorized response code and have your UI present a login form. I've done modals and full page redirects, depends on your sensibilities and the structure of your ui-router stuff.

Put the below code (or something similar) inside of your app.js inside of a .config() block.

Verbatim from the docs:

// Inside app config block
$httpProvider.interceptors.push(function($q, $location, LoopBackAuth) {
  return {
    responseError: function(rejection) {
      if (rejection.status == 401) {
        //Now clearing the loopback values from client browser for safe logout...
        $location.nextAfterLogin = $location.path();
      return $q.reject(rejection);
// In the Login controller
User.login($scope.credentials, function() {
  var next = $location.nextAfterLogin || '/';
  $location.nextAfterLogin = null;

Given that, you can add an event listener to $stateChangeStart, in your .run() block -

$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
  // API call here to check if you get (or simply trigger) a 401
  // whitelist states that can be accessed publicly
  // or blacklist states that cannot be accessed without auth
  // whichever is more straightforward
  // lots of attributes available to check for various metadata attached to states and determine yes/no to continue the state change

See here for $stateChangeStart and the arguments passed to the callback:$state

So while it's true that a user could take full control of their browser and thwart this check and force the browser to load the view(s), they still can't access any API calls that require a valid token. So the views will load but the data will not, as long as you have proper ACLs on your sensitive remote methods.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download