javascript - Angularjs routing choppy when using authentication -

i looking better way transitions between route states in angularjs. have been following couple different tutorials configure angular backend api server using authentication on server side.

http://frederiknakstad.com/authentication-in-single-page-applications-with-angular-js/ https://vickev.com/#!/article/authentication-in-single-page-applications-node-js-passportjs-angularjs

both of these describe similar identical solution authentication on server side rather on client side. have auth service in angular uses method post api server checking whether user isloggedin using api key.

isloggedin: function( event, tostate ) {         var user_api = {};          if( "user" in $rootscope ) {             user_api = { "api": $rootscope.user.api };         }           $http.post('http://bac-api/authenticated/', user_api)             .success( function( user ) {                 if( tostate.url === '/login' && user.authenticated === true) {                     $state.transitionto('dashboard');                 }             })             .error( function( user ) {                 if( user.authenticated === false ) {                     event.preventdefault();                     $state.transitionto('login');                 }             });     }, 

if api key not present of course user not logged in , server send {"autheticated": false} 401 response. if user has api key uses api key check on server whether valid (logged in) or not valid (not logged in).

in order catch routes , check whether user authenticated , using "statechangestart"

$rootscope.$on("$statechangestart", function ( event, tostate, toparams, fromstate, fromparams ) {      auth.isloggedin( event, tostate );  });   

the first problem state change not triggered on intial page load , results in using routeprovider transition login page. , throughout app if route requested not in configured routes transition login page not trigger statechangestart. user logged in , sitting @ login page. rather transfer dashboard configured route.

for part setup seems working ok in theory routes choppy. happen in between checking if user logged in route start change , start show page when application realizes user not logged make switch login page. resolve choppiness. , instead of getting glipse of other pages able transfer correctly.

i using ui-router , states in application everything. , using route provider $routeprovider.otherwise('login') when there isn't route requested route.

1. i figure out how stop showing part of new pages (the choppiness) during route transitions while application checking user being authenticated. whether in different event i'm unaware of or whatever.

2. also better way use routeprovider.otherwise() trigger state change , check whether user isloggedin. if logged in transfer dashboard ifnot logged in stay on login page until finished logging in.

sorry if confusing. new angularjs , have been reading can find routes, states , authentication. new concept me learn how manage authentication on server side angular.

-- edit

after taking recommendation of mbielski have implemented resolve states use auth.isloggedin() service. still has not removed choppiness of switching routes , fear once not in local development choppiness become worse waiting on api response. here resolve code parent dashboard state.

'dashboard-shell': {             name: 'dashboard-shell',             resolve: {                 auth: function( auth ) {                     return auth.isloggedin();                 }             },             views: {               "dashboard-shell": {                 controller: 'dashboardcontroller',                 templateurl: 'app/modules/template-manager/partials/dashboard.tpl.html'               }             }         }, 

your problem seems every state change results in post request must handled before can switch states. assume handle session expiry, or because don't have authentication cookie inspect.

you've implemented pessimistic approach ensure user authenticated before doing other http callbacks.

another approach might use angular-http-auth http interceptor. interceptor provides optimistic approach ensure user authenticated: passes every http call on backend, give special callback; when backend returns 403 unauthorized callback used e.g. show login dialog user can (re)authenticate. after that, interceptor replays http calls resulted in 403.