2 min read
Alexandre Dulaunoy https://flic.kr/p/cKwP4b
Next in trending

Authentication with AngularJS

Simplify your user authentication when using ui-router

Authentication with AngularJS

Simplify your user authentication when using ui-router


Managing authentication within your AngularJS application is extremely important, initially I found it quite difficult to find some examples of how to do it the right way for my startup http://enquiryhq.com, keeping the logic clean, and as automated as possible.

Initially I just rolled some convoluted solution using the $rootScope to store variables, and then access those variables within my controllers, but it was messy, and created a lot of duplicate code.

So I was pointed to an article on the subject (thanks @gdi2290) that had a better example of how to do this, but it wasn’t setup for ui-router, so I had to adapt it a little to work with it.

First of all I adjusted my routes to the following: (note the addition of the authenticate property)

myApp.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state("forms", {
url: "/forms",
templateUrl: "partials/forms.html",
controller: "FormsListCtrl",
authenticate: true
})
.state("login", {
url: "/login",
templateUrl: "partials/login.html",
controller: "LoginCtrl",
authenticate: false
});
// Send to login if the URL was not found
$urlRouterProvider.otherwise("/login");
});

Then, within my run function, I’m listening to the $stateChangeStart event, which fires each time you move within your application. It’s perfect for checking authentication.

You could wrap the following code into a directive to keep it clean, but for the sake of this article I’ve included it in the run event.

angular.module("myApp")
.run(function ($rootScope, $state, AuthService) {
$rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
if (toState.authenticate && !AuthService.isAuthenticated()){
// User isn’t authenticated
$state.transitionTo("login");
event.preventDefault();
}
});
});

The AuthService is just an example service, because as well as checking if the route requires authentication, you need to also check that they are actually authenticated. In my case I have a function that checks for the existence of their token, and ensures that it’s valid.

That’s it, pretty really simple huh! It’s so much easier to maintain compared to how I was handling this before, it keeps the authentication logic much cleaner, and I don’t have to include any authentication logic in my controllers, as this handles everything.