Loopback 2 and Angular SDK local storage

54 views

Skip to first unread message

Philippe Corrèges

unread,

Nov 22, 2016, 7:38:03 AM11/22/16

to LoopbackJS

Hi,

I have seen many posts on this topic but things are not still very clear to me.

I have an angular app talking to a loopback 2 server.

A user authenticates through this controller :

 .controller('AuthLoginController', ['$scope', 'AuthService', '$state',
function($scope, AuthService, $state) {
  $scope.user = {
    email: '',
    password: '',
    firstName: '',
    lastName:''
  };

  $scope.login = function() {
    AuthService.login($scope.user.email, $scope.user.password, $scope.user.firstName, $scope.user.lastName)
        .then(function() {
          $state.go('/');
        });
  };
}])

and through this service (factory):

.factory('AuthService', [ 'Client','$q', '$rootScope', function(Client, $q,
                                                                  $rootScope) {
  function login(email, password) {
    return Client
        .login({email: email, password: password})
        .$promise
        .then(function(response) {
          $rootScope.currentUser = {
            id: response.user.id,
            tokenId: response.id,
            email: email
          };
        });
  }

The login process is ok. I can show some menus with

<li ng-show="currentUser">

and the appropriate

authenticate: true

in ui-router.

Once logged in, I have

$LoopBack$accessTokenId BJD38Vo0BHnIvAZ2c54ZBrnNc2zo7f26AsEJGGIO0qCrTXfMSezpJkNvyiohMXlP

in my local storage.

My problem is :

When I do a refresh on a page (which is angular) defined in ui-router, the local storage persists in the browser cache but my page is unreachable (Error http 404).

The Token is still in the cache.

I do not understand what happens.

Any help would be really appreciated.

Kind Regards

Joshua Mendoza

unread,

Nov 30, 2016, 9:27:38 AM11/30/16

to LoopbackJS

Since Angular SDK uses localStorage by design (http://loopback.io/doc/en/lb2/AngularJS-JavaScript-SDK.html#persisting-the-access-token), you should decide where do you want to destroy your access tokens when they are not longer valid.

For the way to do it, you may mimic that of the generated lb-services.js in the User logout resource handler:

"logout": {
  interceptor: {
    response: function(response) {
      LoopBackAuth.clearUser();
      LoopBackAuth.clearStorage();
      return response.resource;
    }
  },
  url: urlBase + "/users/logout",
  method: "POST"
}

Now, you may add a handler when some request returns a 401 response and then, destroy your access tokens, like this:

angular
  .module('app')
  .factory('AuthInterceptor', function ($q, LoopBackAuth) {
    return {
      responseError: function (response) {
        if (response.status == 401) {
          // Do some login for unauthorized reqs...
          LoopBackAuth.clearUser();
          LoopBackAuth.clearStorage();
        }
        if (response.status == 403) {
          // Other logic for unauthenticated reqs...
        }
        return $q.reject(response);
      }
    };
  })
  .config(function ($httpProvider) {
    $httpProvider.interceptors.push('AuthInterceptor');
  })