simple.angular.auth.js

<div ng-app="app" ng-controller="Main as main" class="container">
  <h1>Simple Angular Auth - Thinkster</h1>

  <input type="text" class="form-control" ng-model="main.username" placeholder="username"><br>
  <input type="password" class="form-control" ng-model="main.password" placeholder="password"><br>
  <br>

  <button class="btn" ng-click="main.register()">Register</button>
  <button class="btn" ng-click="main.login()">Login</button>
  <button class="btn" ng-click="main.logout()" ng-show="main.isAuthed()">Logout</button>

  <button class="btn" ng-click="main.getQuote()">get quote</button>
  <br><br>
  {{main.message}}
</div>


;(function(){
function authInterceptor(API, auth) {
  return {
    // automatically attach Authorization header
    request: function(config) {
      var token = auth.getToken();
      if(config.url.indexOf(API) === 0 && token) {
        config.headers.Authorization = 'Bearer ' + token;
      }
      return config;
    },

    response: function(res) {
      if(res.config.url.indexOf(API) === 0 && res.data.token) {
        auth.saveToken(res.data.token);
      }

      return res;
    },
  }
}

function authService($window) {
  var srvc = this;

  srvc.parseJwt = function (token) {
    var base64Url = token.split('.')[1];
    var base64 = base64Url.replace('-', '+').replace('_', '/');
    return JSON.parse($window.atob(base64));
  };
  
  srvc.saveToken = function (token) {
    $window.localStorage['jwtToken'] = token
  };
  
  srvc.logout = function (token) {
    $window.localStorage.removeItem('jwtToken');
  };
  
  srvc.getToken = function () {
    return $window.localStorage['jwtToken'];
  };
  
  srvc.isAuthed = function () {
    var token = srvc.getToken();
    if (token) {
      var params = srvc.parseJwt(token);
      return Math.round(new Date().getTime() / 1000) <= params.exp;
    } else {
      return false;
    }
  }
  
}

function userService($http, API, auth) {
  var srvc = this;
  srvc.getQuote = function() {
    return $http.get(API + '/auth/quote')
  }
  srvc.register = function (username, password) {
    return $http.post(API + '/auth/register', {
      username: username,
      password: password
    });
  };
  
  srvc.login = function (username, password) {
    return $http.post(API + '/auth/login', {
      username: username,
      password: password
    });
  };

}

// We won't touch anything in here
function MainCtrl(user, auth) {
  var self = this;

  function handleRequest(res) {
    var token = res.data ? res.data.token : null;
    if(token) { 
      console.log('JWT:', token);
    }
    self.message = res.data.message;
  }

  self.login = function() {
    user.login(self.username, self.password)
      .then(handleRequest, handleRequest)
  }
  self.register = function() {
    user.register(self.username, self.password)
      .then(handleRequest, handleRequest)
  }
  self.getQuote = function() {
    user.getQuote()
      .then(handleRequest, handleRequest)
  }
  self.logout = function() {
    auth.logout && auth.logout()
  }
  self.isAuthed = function() {
    return auth.isAuthed ? auth.isAuthed() : false
  }
}

angular.module('app', [])
.factory('authInterceptor', authInterceptor)
.service('user', userService)
.service('auth', authService)
.constant('API', 'https://test-routes.herokuapp.com')
.config(function($httpProvider) {
  $httpProvider.interceptors.push('authInterceptor');
})
.controller('Main', MainCtrl)
})();