Skip to content

Instantly share code, notes, and snippets.

@BrandonDavidDee
Created June 10, 2018 17:42
Show Gist options
  • Save BrandonDavidDee/0e93a139f9864c062e306ebe43778050 to your computer and use it in GitHub Desktop.
Save BrandonDavidDee/0e93a139f9864c062e306ebe43778050 to your computer and use it in GitHub Desktop.
Set of AngularJS services used to set/get and refresh JSON tokens using cookies
// modified from: https://medium.com/@kevinle/exchange-refresh-token-for-json-web-token-jwt-in-angularjs-using-promise-453da9127cd7
'use strict';
angular.module('supportApp.services', [])
.factory('authService', ['$http', '$q', 'authCookies', 'parseToken',
function ($http, $q, authCookies, parseToken) {
return {
getAuthorizationHeader() {
var accessToken = authCookies.getAccessToken();
if (accessToken && parseToken.parseJwt(accessToken)) {
// if access_token exists AND it's valid and
// not expired return its value
return $q.when({'Authorization': 'Bearer ' + accessToken});
} else {
// access token is invalid or doesn't exist, so check
// for refresh token, if it exists use it to make a
// POST call to token refresh resource
var refreshToken = authCookies.getRefreshToken();
if (angular.isUndefined(refreshToken)) {
// refresh token doesn't exist so pass empty header
// so the resource responds with 401 unauthorized which
// will cause a redirect to /login (via the controller)
return $q.when({});
} else {
// use existing refresh token from cookies to make a POST
// request to token refresh endpoint
return $http({
method: 'POST',
url: 'http://localhost:5000/api/token-refresh',
headers: {Authorization: "Bearer " + refreshToken}
})
.then(function (response) {
// a successful response will have a new access token,
// so we'll replace the old token in the cookie
accessToken = response.data.access_token;
authCookies.setAccessToken(accessToken);
// and return token in the header
return {'Authorization': 'Bearer ' + accessToken};
})
.catch(function (err) {
// any problem making this token refresh call gets logged out here
console.log('Error refreshing token ' + err.data)
})
}
}
}
}
}
])
.factory('authCookies', function ($cookies) {
var setAccessToken = function (jwt_access_token) {
$cookies.putObject('accessToken', jwt_access_token);
};
var getAccessToken = function () {
return $cookies.getObject('accessToken');
};
var setRefreshToken = function (token) {
$cookies.putObject('refreshToken', token);
};
var getRefreshToken = function () {
return $cookies.getObject('refreshToken');
};
return {
setAccessToken: setAccessToken,
getAccessToken: getAccessToken,
setRefreshToken: setRefreshToken,
getRefreshToken: getRefreshToken
};
})
.factory('parseToken', function () {
var parseJwt = function (token) {
var base64Url = token.split('.')[1];
var base64 = base64Url.replace('-', '+').replace('_', '/');
var decoded_token = JSON.parse(window.atob(base64));
var current_time = new Date().getTime() / 1000;
if (current_time > decoded_token.exp) {
return false;
} else {
return true;
}
};
return {
parseJwt: parseJwt
};
});
//**** PAIRED WITH THIS MODULE WHICH HAS A LOGIN CONTROLLER AND A CONTROLLER TO ACCESS A PROTECTED RESOURCE ****//
'use strict';
angular.module('supportApp.users', ['ngRoute', 'supportApp.services'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/users', {
templateUrl: 'users/users.html',
controller: 'UsersCtrl'
});
}])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/login', {
templateUrl: 'users/login.html',
controller: 'loginCtrl'
});
}])
.controller('UsersCtrl', [
'$scope',
'$http',
'$location',
'authService',
function ($scope, $http, $location, authService) {
return authService.getAuthorizationHeader().then(authHeader => {
return $http.get('http://localhost:5000/api/user/', {headers: authHeader})
.then(function (response) {
$scope.users = response.data;
})
.catch(function () {
$location.path('/login');
});
});
}
])
.controller('loginCtrl', [
'$scope',
'$http',
'$location',
'authCookies',
function ($scope, $http, $location, authCookies) {
$scope.user = {};
$scope.userLogin = function () {
$http.post('http://localhost:5000/login', $scope.user)
.then(function (response) {
$scope.successMessage = response.data;
var jwt_access_token = response.data.access_token;
var jwt_refresh_token = response.data.refresh_token;
authCookies.setAccessToken(jwt_access_token);
authCookies.setRefreshToken(jwt_refresh_token);
$location.path('/users');
})
.catch(function (error) {
$scope.errorMessage = error.data;
});
};
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment