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

时间:2015-05-26 06:56:56

标签: javascript angularjs keycloak

我有一个角度js应用程序,它使用ngRoute。重定向到应用程序来自父网站,父网站会自动将一些查询参数附加到URL中。这会触发角度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.   引导完成后立即
  3. $ route.reload
  4.   
  5. $ location.path(' / home')更改网址的路径
  6.   
  7. document.location.href来改变url的路径,JS方式
  8.   

但他们都没有解决这个问题。

如何停止此重新加载问题?我可以添加一个过滤器,它会在角度应用程序内部从URL中删除任何类型的查询参数吗?如果是的话,你能指导我怎么做吗?

由于

1 个答案:

答案 0 :(得分: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