Angular JS + user authentication + page refresh

Question

So this is my problem.

I can successfully login from my angularJS app using the auth factory i made that communicates to my pp rest API. lets say Auth.login(user) -> (POST) myapi.com/user/login: the response is the user object that Auth saves locally. Thus Auth.getCurrentUser() returns local user object.

my rest API, i also have a myapi.com/user/get_loggedin_user which returns the current logged in user (using the php session). So if Auth.getCurrentUser should actually check if local user exists, if not do an ajax to myapi.com/user/get_loggedin_user and check if logged in before responding with null. One problem here is, ajax is annoying like this, you would then need to put in a success callback function and have all your code execute inside the success callback.

Now lets say im on the Angular App (website), mydomain.com/user/dashboard (already logged in), and then i refresh my browser. Now, when the page reloads, angular does not know my current user, so before it redirects me to mydomain/login, i want it to check if the user is logged in. i can obviously do a 1 time call within the controller, but is there a more easy way where i can register within a controller with some access restrictions (Eg: logged_in == true), and when you visit any page with logged in requirement, it checks local user (gets the user if does not exist), and redirects to login page if null, or display the page once it matches the requirements?

Different common page requirements: null, logged_in, admin, function: haveAccess(user, object).

NOTE: im using stateProvider

Answer 1

If I understood your question correctly, you are asking about how to check whether the user is logged in before the controller is invoked, and to avoid the check for a logged-in status in each controller that needs it.

If so, you should look into the resolve parameter - this exists both in $routerProvider and $stateProvide .

Essentially you could "resolve" your loggedInUser variable (by doing whatever you need to do via your MyAuth service.

Here's an example of what I mean with $routeProvider:

$routeProvider
   .when("/someSecuredContent", {
     templateUrl: 'someSecuredContent.html',
     controller: 'SecuredController',
     resolve: {
        loggedInUser: function(MyAuth){
           return MyAuth.loggedIn(); // MyAuth.loggedIn() should return a $q promise
        }
     }
});

Then in the controller, loggedInUser will be injected.

Here's a site with more examples.

Answer 2

Correct me if im wrong:

Do this within the Main Controller (make sure you inject the dependancies like rootScope, state, and your own Authfactory)

    $rootScope.$on('$stateChangeStart', function (event, next, toParams) {
        if (needToBeLoggedIn()) { //use the next object to read any data, and you can set on the state some flag
            event.preventDefault()
            MyAuth.loggedIn(function success(){ $state.go(next,toParams); }, function err (){/*send somewhere else*/});
        }
    })

Answer 3

Put logged_in = true to cookieStore in your login method after authentication as below.

$cookieStore.put('logged_in',true);
$rootScope.logged_in = true;

and in your Controller, do

$rootScope.logged_in = $cookieStore.get('logged_in');

Now you can use this logged_in variable anywhere in the UI to check if the user is logged in. Make sure to use 'ngCookies' module in your app. and pass the $cookieStore dependency to your controller. You can even keep the user object itself similar to logged_in variable in cookies and retrieve it from cookies. Make sure to do logged_in = false and clear other variables in cookies and set it to blank in your logout method.