AngularJS authentication from remote server

Question

I'm trying to think on approach to do authentication with Angular and remote server. Usually what I do in local server, like what they did in MEAN.IO, check if has user and if it is I put it on the global window and that's how I know that user is authenticated.

for example in laravel:

  @if(Auth::check())
        <script>
            var user= [[[Auth::user()]]]
        </script>
        @endif

and it survive refresh because im check it at run time too.

but now the server is remotely and i have to do something like get request to some url /getUser. But thats not good since all the AngularJS components will have to wait for the response to return causing inconsistencies and development overhead.

So what I should do?

Answer 1

You can use "resolve" in order to avoid changing your current logic.

Define a Security service that performs the check let's say Security.getUser() and add it to the resolve of each route you need to secure. That way, your controller will be loaded only once the user is already checked. In case the server will return an authentication error, redirect to the login screen.

You can check out my slides from a secured angular talk I gave goo.gl/kMvoFj or go over my github repository (It's still very raw, but the main idea is there) ng-secure , I think it might help you.