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

Question

我有一个 angular js 应用程序，它使用 ngRoute。应用程序的重定向来自父网站，父网站自动将一些查询参数附加到 URL 中。这会触发 angular js 应用程序的无限循环。

母网站准备的url如

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

Angular JS 接受这个 URL 并像下面那样修改它，至少那是我所看到的。

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

然后页面继续重定向到同一个 link。我认为原因是因为 ngRoute，因为当我创建一个没有 ngRoute 的示例应用程序时它工作得很好。

这是我的 main.js

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

我的ngRoute如下

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

我认为问题出在 ngRoute 中的 otherwise，它一直在重新路由到同一位置。

解决这个问题

I tried adding reloadOnSearch: false in route configuration

$route.reload as soon as the bootstrapping is done

$location.path('/home') to change the path of the url

document.location.href to change the path of the url, the JS way

但其中 none 正在解决问题。

如何解决这个重新加载问题？当在 angular 应用程序中时，我可以添加一个过滤器来从 url 中删除任何类型的查询参数吗？如果是，你能指导我怎么做吗？

谢谢

Answer 1

您可能希望仅在 Keycloak 初始化后 bootstrap 您的应用程序。您可以使用他们的 "AngularJS" 示例作为基础，但基本上，使用这个：

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

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

Angular JS page load triggers infinite page load loop

javascript

angularjs

keycloak