Angular JS + user authentication + page refresh

So this is my problem.

I can successfully login from my angularJS app using the auth factory which I linked to my pp API. let's say Auth.login (user) -> (POST) myapi.com/user/login: the response is a user object that Auth stores locally. Thus, Auth.getCurrentUser () returns the local user object.

my rest API, I also have myapi.com/user/get_loggedin_user which returns the currently logged in user (using php session). So if Auth.getCurrentUser should really check if the local user exists, if not do ajax for myapi.com/user/get_loggedin_user and check if it hasn't been logged before responding to null. One problem is that ajax is annoying like this, then you will need to include the success callback function and execute all your code in the callback.

Now let's say im on Angular application (website), mydomain.com/user/dashboard (already logged in) and then refresh my browser. Now when the page reloads, Angular doesn't know my current user, so before redirecting me to mydomain / login, I want it to check if the user is logged in. Obviously, I can make 1 call in the controller, but is there an easier way by which I can log into the controller with some access restrictions (for example: logged_in == true), and when you visit any page that requires login , does it validate the local user (get the user if it doesn't exist) and redirect to the login page if null, or renders the page after meeting requirements?

Various general page requirements: null, logged_in, admin, function: hasAccess (user, object).

NOTE: im using stateProvider

+3


source to share


3 answers


If I understand your question correctly, you are asking how to check if the user is logged in before calling the controller, and to avoid checking the login status in every controller that needs it.

If so, you should examine the parameter resolve

- it exists in both $ routerProvider and $ stateProvide .

Essentially you can "resolve" your loggedInUser variable (by doing whatever you need to do with the service MyAuth

.

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 the controller will be entered loggedInUser

.

Here's a site with more examples.

+4


source


Correct me if I'm wrong:

Do this in your main controller (make sure you inject dependencies 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*/});
        }
    })

      

+2


source


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

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

      

and in your controller,

$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. Be sure to use the "ngCookies" module in your application. and pass the $ cookieStore dependency with your controller. You can even store a user object similar to the 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 a value in the logout method.

+2


source







All Articles