Angular JSON Web Token Authentication Module
npm install angular-jwt-auth



$http xhr localstorage so it is available between sessionsInstall through npm:
``sh`
npm install angular-jwt-auth --save
* Require the ngJwtAuth module in your angular application
`ts`
import "angular"
import "angular-jwt-auth"
angular.module('app', ['ngJwtAuth'])
* (Optionally) configure the service provider
`ts
import {NgJwtAuthServiceProvider} from "angular-jwt-auth"
angular.module('app', ['ngJwtAuth'])
.config(['ngJwtAuthServiceProvider', function(ngJwtAuthServiceProvider:NgJwtAuthServiceProvider){
ngJwtAuthServiceProvider
.configure({
tokenLocation: 'token-custom',
apiEndpoints: {
base: '/api',
login: '/login-custom',
tokenExchange: '/token-custom',
refresh: '/refresh-custom',
}
})
;
}])
`
* Inject the ngJwtAuthService, initialise it then use it!
The init function loads any existing token from storage and kicks off the $interval that
monitors the expiry status of the token.
It is _highly_ recommended that you register a login prompt factory (See below), as
this will allow the interceptor to prompt your users for their login details when an api
request that returns status code 401.
`ts`
angular.module('app', ['ngJwtAuth'])
.run(['ngJwtAuthService', function(ngJwtAuthService){
ngJwtAuthService.init();
}])
.controller('AppCtrl', ['$scope', 'ngJwtAuthService', function($scope, ngJwtAuthService){
$scope.login = function(username, password){
ngJwtAuthService.authenticateCredentials(username, password)
.then(function(authenticatedUser){
console.log("Login Success!", authenticatedUser);
})
.catch(function(err){
console.error(err);
})
};
}])
:Note this example is in typescript, but it is the same process in plain javascript.
`ts
namespace app.guest.login {
export const namespace = 'app.guest.login';
class LoginConfig {
static $inject:string[] = ['ngJwtAuthServiceProvider',];
constructor(private ngJwtAuthServiceProvider:NgJwtAuthServiceProvider) {
ngJwtAuthServiceProvider
.configure({
tokenLocation: 'token-custom',
apiEndpoints: {
base: '/api',
login: '/login-custom',
tokenExchange: '/token-custom',
refresh: '/refresh-custom',
}
});
}
}
class LoginController {
static $inject = ['$rootScope', '$mdDialog', '$mdToast', 'ngJwtAuthService', 'deferredCredentials', 'loginSuccess', 'userService'];
constructor(private $rootScope:global.IRootScope,
private $mdDialog:ng.material.IDialogService,
private $mdToast:ng.material.IToastService,
private ngJwtAuthService:NgJwtAuthService,
private deferredCredentials:ng.IDeferred
private loginSuccess:{promise:ng.IPromise
private userService:common.services.user.UserService) {
this.handleLoginSuccessPromise();
}
/**
* Register the login success promise handler
*/
private handleLoginSuccessPromise() {
//register error handling and close on success
this.loginSuccess.promise
.then(
(user) => this.$mdDialog.hide(user), //on success hide the dialog, pass through the returned user object
null,
(err:Error) => {
if (err instanceof NgJwtAuthCredentialsFailedException) {
this.$mdToast.show(
(
.hideDelay(2000)
.position('top')
.content(err.message)
.parent('#loginDialog')
);
} else {
console.error(err);
}
}
);
}
/**
* allow the user to manually close the dialog
*/
public cancelLoginDialog() {
this.ngJwtAuthService.logout(); //make sure the user is logged out
this.$mdDialog.cancel('closed');
}
/**
* Attempt login
* @param username
* @param password
*/
public login(username, password) {
let credentials:ICredentials = {
username: username,
password: password,
};
this.deferredCredentials.notify(credentials); //resolve the deferred credentials with the passed creds
}
}
angular.module(namespace, [])
.config(LoginConfig)
.controller(namespace + '.controller', LoginController);
}
``