Angular JS页面加载触发无限页面加载循环

Question

I have an angular js app, which using ngRoute. The redirection to the application is coming from a parent website and the parent website appends some query parameters into the URL automatically. This triggers an infinite loop of the angular js application.

The url that is prepared by the parent website is like

http://website.com/angularapp/?redirect=bla&code=anotherbla

Angular JS takes this URL and modifies it like below, atleast thats what i have seen.

http://website.com/angularapp/?redirect=bla&code=anotherbla#/home

And then the page keeps on redirecting to the same link. I think the reason is because of ngRoute, because when i created a sample app without ngRoute it worked just fine.

Here is my main.js

var module = angular.module('product', []);    
angular.element(document).ready(function($http) {
// There are bootstrapping functions which checks for SSO in keycloak here
});

My ngRoute is as below

module.config(function($routeProvider) {
    $routeProvider.when('/home', {
templateUrl : 'pages/panels.html',
        controller : 'PanelCtrl',
        reloadOnSearch: false
    }).otherwise({
    redirectTo : '/home'
});

I think the problem is because of the otherwise in ngRoute, which keep on rerouting to the same location.

To fix this

1. I tried adding reloadOnSearch: false in route configuration
2. $route.reload as soon as the bootstrapping is done
3. $location.path('/home') to change the path of the url
4. document.location.href to change the path of the url, the JS way

But none of them is solving the issue.

How do I stop this reloading issue? Can I add a filter which will remove any sort of query parameters from the url when inside the angular application? If yes, can you guide me how to do that?

Thanks

Answer 1

You might want to bootstrap your application only after Keycloak has initialized. You can use their "AngularJS" example as base, but basically, use this:

var auth = {};
angular.element(document).ready(function ($http) {
  var keycloakAuth = new Keycloak('keycloak.json');
  auth.loggedIn = false;

  keycloakAuth.init({ onLoad: 'login-required' }).success(function () {
    auth.loggedIn = true;
    auth.authz = keycloakAuth;
    auth.logoutUrl = keycloakAuth.authServerUrl + "/realms/demo/tokens/logout?redirect_uri=/angular-product/index.html";
    module.factory('Auth', function() {
      return auth;
    });
    angular.bootstrap(document, ["product"]);
  }).error(function () {
    window.location.reload();
  });

});

https://github.com/keycloak/keycloak/blob/master/examples/demo-template/angular-product-app/src/main/webapp/js/app.js#L23