angularjs delay loading app until a specified condition

Question

My angular app (SPA) needs to redirect to another server if user is not authenticated. This is a separate machine which means there can be a delay when redirecting from the my angular app to this auth server.

What I am looking to achieve is as follows:

When the app is requested and being loaded , it either dont show the content or show a vanilla/simple page.

If the app finds that the user is not logged in or login expired then it will continue to show that vanilla page while redirecting the app to this auth server.

Would really appreciate inputs in this.

Thanks,

Edit: interceptor.js code looks as follows:

    app.factory('authInterceptorService', ['$q', '$injector', '$location', 'localStorageService',
        function ($q, $injector, $location, localStorageService) {
....
        var request = function (config) {
            config.headers = config.headers || {};
            var fragments = getFragment();
            if(fragments.access_token != undefined)
                localStorageService.add("authorizationData", { token: fragments.access_token, token_type: fragments.token_type, state : fragments.state, });
            var authData = localStorageService.get('authorizationData');
            if(authData)
            {
                config.headers.Authorization = authData.token_type + ' ' + authData.token;
                $location.path( "/dashboard" );
            }
            else
                logout();
            return config;
        };

        var responseError = function (rejection) {
            if (rejection.status === 401) {
                logout();
            }
            return $q.reject(rejection);
        };

        var logout  = function()
        {
            localStorageService.remove('authorizationData');
            var scope = 'my-scope';
                    var uri = addQueryString('http://www.authserver.com/OAuth/Authorize', {
                        'client_id': 'dsfdsafdsafdsfdsfdsafasdf',
                        'redirect_uri': 'www.returnuri.com',
                        'state': 'asdfasfsdf',
                        'scope': 'scope1',
                        'response_type': 'token'
                        });
                window.location.replace(uri);

        };

        authInterceptorServiceFactory.request = request;
        authInterceptorServiceFactory.responseError = responseError;
        authInterceptorServiceFactory.logout = logout;

        return authInterceptorServiceFactory;
    }]);
});

which is similar to what is being suggested by Blackunknown. But the problem is that the landing page gets loaded fully and then its gets redirected to the auth server. I know that the issue is that they are separate servers so they can have different response time.

Blackunknown · Accepted Answer · 2014-10-06 13:54:04Z

I use a couple of things to get this done in an mvc 5 application. Of which the most important component being the AuthorizeInterceptor. I use a class set up in my coffee/javascripts than you will be seeing in most examples but the main principles are the same. I'll spare you the coffee here is some javascript:

(function() {
  "use strict";

  var AuthorizeConfig, AuthorizeInterceptor;

  AuthorizeInterceptor = (function() {
    function AuthorizeInterceptor($q, $location) {
      this.$q = $q;
      this.$location = $location;
      return {
        response: function(response) {
          return response || $q.when(response);
        },
        responseError: function(rejection) {
          if (((rejection != null ? rejection.status : void 0) != null) && rejection.status === 401) {
            $location.path("/Login");
          }
          return $q.reject(rejection);
        }
      };
    }

    return AuthorizeInterceptor;

  })();

  angular.module("myapp").factory("AuthorizeInterceptor", ["$q", "$location", AuthorizeInterceptor]);

  AuthorizeConfig = (function() {
    function AuthorizeConfig($httpProvider) {
      $httpProvider.interceptors.push("AuthorizeInterceptor");
    }

    return AuthorizeConfig;

  })();

  angular.module("myapp").config(["$httpProvider", AuthorizeConfig]);

}).call(this);

When a request results in a 401 it will redirect this person to the login page of the application.

Shomz · Accepted Answer · 2014-10-06 13:42:17Z

0

Since you provided absolutely no code, here's a pseudo-example:

$http.get('yourAuthServer').success(function(response){
    // save session data and redirect the user to the regular page
    $location.path('loggedInRoute');
}).error(function(err){
    // handle the failed authentification here
    $location.path('authFailed');
});

So, the idea is to have a landing page with no sensitive data. You'll make an auth request from the main controller and, based on the results, you'll redirect the user properly. Of course, you should have authentication checks in place on your logged in page and not rely only on that redirection. But that will get you started.

answered Oct 6, 2014 at 13:42

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

Collectives™ on Stack Overflow

angularjs delay loading app until a specified condition

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related