How to avoid showing login page if already logged on with angularjs?

Question

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( "/" );
        } );
    };
}] );

Answer 1

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

Answer 2

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?