2

I am working on an Angular app which calls an external API for login authentication.

I am to successfully call the API for logging in and logging out, which I use to put in a boolean into Local Storage (so it persists on refresh).

I feel this might be a pretty terrible way of implementing this. Is there a better way in Angular to do this?

My implementation:

app.js

var module = angular
  .module('myApp', [
    'ngRoute',
    'ngTouch',
    'LocalStorageModule'
  ])
  .config(function ($routeProvider, $locationProvider, localStorageServiceProvider) {
 $routeProvider
 ...
 .when('/protectedroute, {
  ...
 resolve: {
  'auth': function(Auth) {
     return Auth.authorized(); 
  }

 }
})

}

Auth service:

angular.module('myApp')
  .service('Auth', function ($http, $q, $window, $location, localStorageService) {

    var isLogged = localStorageService.get('isLogged');
    console.log(isLogged);
    return {
      authorized: function() {
        if (!localStorageService.get('isLogged')) {
          console.log('DENY');
          $location.path('/');
        } else {
          console.log('ALLOW');
        }
      }
    }
  });

login service:

angular.module('myApp')
  .service('Login', function ($http, $q, $window, $location, localStorageService) {
    return {
      login: function (username, password) {
        var reqLogin = {
          method: 'POST',
          url: 'url_api',
          data: $.param({
            'user[email]': username,
            'user[password]': password
          }),
          headers: {
            ...
          }
        }

        $http(reqLogin).then(function successCallback(response) {
          console.log('success!');
          console.log(response);
          localStorageService.set('isLogged', true);
          localStorageService.set('user[email]', username);
          console.log(localStorageService.get('isLogged'), localStorageService.get('user[email]'));


          $location.path('/profile');

        }, function errorCallback(response) {
          console.log('failure');
          console.log(response);
        });
      },
      logout: function() {
        var reqLogout = {
          method: 'DELETE',
          url: 'url_api',
          headers: {
            ...
          }
        }

        $http(reqLogout).then(function successCallback(response) {
          console.log('success!');
          console.log(response);
          localStorageService.set('isLogged', false);
          console.log(localStorageService.get('isLogged'), localStorageService.get('user[email]'));

          $location.path('/');

        }, function errorCallback(response) {
          console.log('failure');
          console.log(response);
        });
      }
    };

  });
Tulun
  • 469
  • 4
  • 15
  • In your run() method of your app.js, attach to the route change event. When your URL or state changes, that event will trigger and there, you can check whatever condition you want and do every action afterwards – MarBVI Oct 30 '16 at 20:42
  • Something in the vein of this sort of thing? http://stackoverflow.com/questions/16344223/angularjs-cancel-route-change-event – Tulun Oct 30 '16 at 22:29
  • Exactly! That's what you can do to protect the routes you want to – MarBVI Oct 30 '16 at 22:30
  • Right, how is that more secure than the method I am doing currently? – Tulun Oct 30 '16 at 22:33
  • There is nothing you can do to protect your routes. since everyone using your site will essentially download a copy of your source code (minified?) they can modify it. You can however protect API calls via server-side authentication but that's a whole other story. – Muli Yulzary Oct 31 '16 at 00:36
  • Right, this would be the use case for something like JSON web tokens, correct? The application itself is just the frontend of an application -- I'm using Node as middleware, but I'm not seeing their backend outside of an exposed API I have for calling content. I believe it's Ruby (or Rails), but I don't know, nor is it relevant I suppose. Is this something out of my purview, or should I leverage Node as middleware for this? – Tulun Oct 31 '16 at 22:45

0 Answers0