How can I check if a user is authenticated in the AngularJS router?
I have an application configured with Mean.js yoman generator. It uses PassportJS to set up local authentication. This all works great and I understand how to check if a user is logged in from the ExpressJS routes file.
The problem is that most of my page routing is done in angular routes. I know how to check the authentication in the controller using the following code.
// Projects controller
angular.module('projects').controller('ProjectsController', ['$scope', '$stateParams', '$location', 'Authentication', 'Projects',
function($scope, $stateParams, $location, Authentication, Projects) {
$scope.authentication = Authentication;
But how to check authentication in routes. For example, in these route files, how will I only allow authenticated users to access the html tools file and redirect users who aren't logged in to the home page:
'use strict';
//Setting up route
angular.module('analysis').config(['$stateProvider',
function($stateProvider) {
// Projects state routing
$stateProvider.
state('imageAnalysis', {
url: '/analysis',
templateUrl: 'modules/analysis/views/tools.client.view.html'
});
}
]);
I know there are similar entries out there, but I had trouble understanding many of them. Thanks, I really appreciate any help. I am new to stackoverflow community and am still learning community standards.
source to share
At a high level, there are two approaches:
-
Use your view routing layer (eg UI router) to catch the "unauthenticated" state
-
Use HTTP interceptors to look for requests that have a status
401 Unauthorized
indicating that the user should be logged in (or that their current session has expired)
In practice, you are probably using a combination of both.
Speaking of UI Router, there are two that do this: Decisions or Events.
Resolves : The UI router provides a nice feature called resolves that allows you to provide a promise that must be resolved before the view is rendered. You can create a promise that resolves your custom state.
Events . The UI provides an event $stateChangeStart
, you can observe this event and prevent it if the user is not logged in. Then you will send the user to the login page. This is a bit more state (you have to remember where the user wanted to go in the first place so you can redirect after login).
I chose the event approach for my work on the Stormpath Angular SDK as it gives me the ability to define authorization over authentication.
source to share
You may be looking for HTTP Interceptors . Check auth for requests.
From OneHungryMind :
HTTP interceptors are a great way to define behavior in one place as a request or response is handled for ALL calls using the $ http service. This is a game changer when you want to set an authentication token on all outgoing calls or respond to a specific HTTP status error at the system level. You can combine hooks with the incredibly useful Angular Storage Module to cache the authenticated user and get it next runtime.
There are some good lessons (1) out there (2) !
source to share