Angular JS頁面加載觸發無限頁面加載循環

Question

我有一個使用ngRoute的有角度的js應用程序。 到應用程序的重定向來自父網站，並且父網站會自動將一些查詢參數附加到URL中。 這將觸發angular js應用程序的無限循環。

父網站准備的網址如下

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

Angular JS使用此URL並按如下所示對其進行修改，這至少就是我所看到的。

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

然后頁面繼續重定向到相同的鏈接。 我認為原因是因為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情況所致，它們會繼續重新路由到同一位置。

要解決這個問題

1. 我嘗試添加reloadOnSearch：路由配置中的false
2. 引導完成后立即運行$ route.reload
3. $ location.path（'/ home'）更改URL的路徑
4. document.location.href更改url的路徑，即JS方式

但是他們都沒有解決這個問題。

如何停止此重新加載問題？ 我可以添加一個過濾器，以便在角度應用程序內部時從網址中刪除所有類型的查詢參數嗎？ 如果是，您可以指導我如何做嗎？

謝謝

Answer 1

您可能只想在Keycloak初始化后引導您的應用程序。 您可以使用其“ 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