AngularJS - after logging in and close tab, it is not redirecting to home

Question

I have created a angularJS application with yeoman, grunt and bower. I have tried a simple login example. After loggin in, it will goto home page. And for any route changes it will check for whether the user is logged in or not. If logged in, it will redirect to home or the particular route, otherwise re-route to login page. This all working fine for me.

Here is app.js

'use strict';
//Define Routing for app
angular.module('mainApp', []).config(['$routeProvider', '$locationProvider',
  function($routeProvider,$locationProvider) {
    $routeProvider
    .when('/login', {
        templateUrl: 'login.html',
        controller: 'LoginController'
    })
    .when('/register', {
        templateUrl: 'register.html',
        controller: 'RegisterController'
      })
    .when('/home', {
       templateUrl: 'views/home.html',
       controller: 'homeController'
    })
    .otherwise({
       redirectTo: '/home'
    });
}])
.run( function($rootScope, $location) {
    // register listener to watch route changes
    $rootScope.$on( "$routeChangeStart", function() {
        var url=$location.path();
        var location=url.replace("/","");
        var authnotallowed=false;
        if(location.indexOf("login")!=-1||location.indexOf("register")!=-1){
            authnotallowed=true
        }
        if ( $rootScope.loggedUser == null ) {
            // not logged user, should be going to #login
            if(authnotallowed){
                $location.path(url);
            } else{
                $location.path( "/login" );
            }
        } else {
            // not going to #login, should redirect now
            if(authnotallowed){
                $location.path("/home");
            } else{
                $location.path(url);
            }

        }
    });
});

angular.module('mainApp').factory("page", function($rootScope){
    var page={};
    var user={};
    page.setUser=function(user){
        $rootScope.loggedUser=user;
    }
    return page;
});

Here is my loginControler.js

'use strict';

angular.module('mainApp').controller('LoginController', function($scope, $location, page) {
    $scope.user = {};
    $scope.loginUser=function(){
        var name=$scope.user.name;
        var pwd=$scope.user.password;
        if(name=="1234" && pwd=="1234"){
            page.setUser($scope.user);
            $location.path( "/home" );
        } else {
            alert("Invalid credentials");
        }
    }
});

All are working fine for me.

Since I am using grunt, the url is like http://localhost:9000/#/login After logging in it is going to home page, if I put like http://localhost:9000/#/login or http://localhost:9000/#/register or any other url. And if I logout and try any page, it goes to login.

The problem is,after logging in when I try just http://localhost:9000/ or I close tab and open the url again, it is going to login page (means the loggedUser is null).

Why it is happening? And how can I solve it?

Do I need to set some cookies or something? If so, how?

How are you maintaining sessions? – Saif Asif Jan 07 '14 at 13:56 — Saif Asif, Jan 07 '14 at 13:56

Andrew Shustariov · Accepted Answer · 2014-01-07T14:08:34.547

3

Well, after you reloading your page, you reloading your application. $rootScope.loggedUser becomes null. And yes, you may use coockies to store session. Here is angularjs docs for cookies

And don't forget to include angular-cookies.js

First add module dependency:

angular.module('mainApp', ['ngCookies'])

Second: inject $cookieStore service

angular.module('mainApp', ['ngCookies']).controller('LoginController', function($scope, $location, page, $cookieStore)

Third: use cookies:

 $scope.loginUser=function(){
        var isLoggedIn = $cookieStore.get('isLoggedIn');

        var name=$scope.user.name;
        var pwd=$scope.user.password;
        if(name=="1234" && pwd=="1234" || isLoggedIn){
            page.setUser($scope.user);
            $location.path( "/home" );
            $cookieStore.put('isLoggedIn', true);
        } else {
            $cookieStore.remove('isLoggedIn');
            alert("Invalid credentials");
        }
    }

But be adviced, this is a very basic, simple and unsecure way to maintain session!

edited Jan 07 '14 at 14:08

answered Jan 07 '14 at 13:56

Andrew Shustariov

2,530
1
17
17

How? Can you give some sample? – Coder Jan 07 '14 at 13:58
@ShijuKBabu added example – Andrew Shustariov Jan 07 '14 at 14:08
Thanks. So, in my `run` method, how to check? – Coder Jan 07 '14 at 15:54
@ShijuKBabu add $cookieStore to run callback parameters, get your cookie value: ```var isLoggedIn = $cookieStore.get('isLoggedIn');```. – Andrew Shustariov Jan 07 '14 at 16:01
ok... Do I need to store user object in cookie? Because, if they are already logged in, I need to set the user object value also. – Coder Jan 07 '14 at 16:24
@ShijuKBabu It's your call. You must decide what is needed to maintain session. My opinion, there must be as minimum information as it could be. Everything, that can be calculated - has to be calculated and not stored add cookies. – Andrew Shustariov Jan 07 '14 at 16:30
Thanks. It is working. But what will be the secure way? – Coder Jan 08 '14 at 07:50
That is not simple question. It depends on your backend and lots other things. You should read links, that Saif Asif proposed. – Andrew Shustariov Jan 08 '14 at 10:55
For now I have done this type of check. I have server running in other port, which is Java web app. While logging in in the success, is it enough to set cookie and user object or do I need to do more? – Coder Jan 08 '14 at 10:59

score 3 · Answer 2 · edited May 23 '17 at 12:23

Based on your comment

I don't know how to do that

I would highly advise you to do some re-search on session management in angularJS. I can point you in some direction as to how to achieve this but then you have to ask yourself which method is more efficient in your case. This is usually an architectural discussion and needs to be discussed at the point when the architecture of the application is being first laid

Check these links to get you started

AngularJS - after logging in and close tab, it is not redirecting to home

2 Answers2