1

I am building an application with AngularJS. I have authentication working and when the user is not authorized, he gets redirected to #/login which shows a login form.

However, when the user is authenticated and he manually goes to #/login, the login page is shown again, although the user is still logged in. Is there any way to direct him to the home page in that case?

This is how I do the redirections:

$routeProvider
       .when( '/ds', {
            templateUrl: 'partials/datasheets-list.html',
            controller: 'DatasheetsListCtrl'
        } )
        .when( '/ds/:datasheetId', {
            templateUrl: 'partials/datasheet-detail.html',
            controller: 'DatasheetDetailCtrl'
         } )                             
         .when( '/login', {
            templateUrl: 'partials/login.html',
            controller: 'LoginController'
          } )
         .otherwise( {
            redirectTo: '/ds'
          } );

This is the code for the LoginController:

var datasheetsControllers = angular.module( 'datasheetsControllers', ['ngCookies', 'datasheetsServices'] );

datasheetsControllers.controller( 'LoginController', ['$scope', '$rootScope', '$location', '$http', '$cookieStore', 'LoginService', function ( $scope, $rootScope, $location, $http, $cookieStore, LoginService )
{

    $scope.login = function ()
    {
        LoginService.authenticate( $.param( {username: $scope.username, password: $scope.password} ), function ( user )
        {
            $rootScope.user = user;
            // Authenticate AngularJS Ajax calls
            $http.defaults.headers.common[ xAuthTokenHeaderName ] = user.token;

            // Authenticate jQuery Ajax calls
            var headers = {};
            headers[xAuthTokenHeaderName] = user.token;
            $.ajaxSetup({
                            headers: headers
                        });
            $cookieStore.put( 'user', user );
            $location.path( "/" );
        } );
    };
}] );
Wim Deblauwe
  • 25,113
  • 20
  • 133
  • 211

2 Answers2

3

I think the common practice is to listen to the $routeChangeStart event.

$scope.$on('$routeChangeStart', function(scope, next, current){
   //...
});

here you can ask if the next path is login and then you can check for the auth service if the user is already logged in. if he is, use redirect as usual to redirect him directly to the login

alternativally you can use the resolve callback in your route object

when('/login', { controller: 'LoginCtrl', templateUrl: '', resolve : {
    load : function ( ... ) { ... }
})

There is already similar stuff here on SO

AngularJS - Need some combination of $routeChangeStart and $locationChangeStart

Fire a callback when route is changed (animations, loaders etc) in AngularJS

Community
  • 1
  • 1
Luke
  • 8,235
  • 3
  • 22
  • 36
0

I managed to do it by simply adding this to the LoginController:

if( $rootScope.user )
{
    $location.path( "/" );
}

(Just before the $scope.login = function () line)

This seems to be working fine, but I don't know if it is considered a bad practice doing this?

Wim Deblauwe
  • 25,113
  • 20
  • 133
  • 211
  • While there is not a "problem" with this solution, you actually want to prevent the initialisation of the login page and everything attached to it, as the user should not even get there anymore. You can do that as mentioned by Luke, by listening to route change events. – enpenax Sep 10 '15 at 07:55
  • In my opinion If you are not confident about the solution and still has a question like *" don't know if it is considered a bad practice doing this?"* ... it's better to add this as an update in the question itself. – T J Nov 25 '15 at 17:56