我试图从https://github.com/keycloak/keycloak/tree/master/examples/demo-template/angular-product-app创建一个改进的登录示例， 这似乎更适合初学者。
无论如何，我在提供程序和配置中添加了所有初始配置，因为我觉得这是一种更好的角度方法。然后我尝试调用 keycloak.init()，这是一个初始化变量的函数，根据您传递给它的参数，您可以查看它是否已经记录。问题是当它被记录时，令牌需要一段时间，我猜这是正常的。
所以我添加了一个 $rootScope.watch(loggedIn) ，所以当 init() 成功时 $rootScope.loggedIn 设置为 true，如果它发生变化。
我在 $rootScope.$watch 中添加了一个 $scope.$apply。由于现在的代码可以正常工作，但由于 $scope.$apply ，我遇到了 $diggest 问题，但它可以工作。我知道这真的很麻烦。
所以我正在寻找解决方案。我对角度真的很陌生。我只能考虑以下方法
1）一个可以在没有 $rootScope 的情况下工作的代码，我认为如果它在没有 $rootScope 的情况下工作会更好，但我不确定如何。也许使用承诺、$q 等。2) 使用 $timeout，我仍在阅读此内容。
我正在寻找一个更 angularjs 优雅的解决方案。
var app = angular.module('myApp', []);
app.controller('PageController', function($rootScope,$scope, $http ,keycloakLauncher) {
$scope.loggedIn = keycloakLauncher.loggedIn;
$scope.user = function(){
console.log("keycloak ", keycloakLauncher.keycloak);
console.log("loggedin ", keycloakLauncher.loggedIn);
if($scope.loggedIn){
/*if(keycloakLauncher.keycloak.idTokenParsed == undefined){
return "Anonymous"
}*/
return keycloakLauncher.keycloak.idTokenParsed.email
}
return "Anonymous";
};
$scope.products = [];
$scope.reloadData = function() {
$http.get("https://localhost:8443/unika/usuarios").success(function(data) {
$scope.products = angular.fromJson(data);
});
};
$scope.logout = function(){
console.log('*** LOGOUT');
keycloakLauncher.loggedIn = false;
keycloakLauncher.keycloak = null;
window.location = keycloakLauncher.logoutUrl;
};
$scope.login = function () {
console.log('*** LOGIN');
keycloakLauncher.keycloak.login();
};
$rootScope.$watch('loggedIn', function(){
$scope.loggedIn = keycloakLauncher.loggedIn;
$scope.user();
$scope.$apply();
});
});
app.provider('keycloakLauncher', function keycloakLauncherProvider() {
this.keycloak = {};
this.loggedIn = false;
this.logoutUrl = "/";
this.$get = function () {
var keycloak = this.keycloak;
var loggedIn = this.loggedIn;
//var logoutUrl
return {
keycloak: keycloak,
loggedIn: loggedIn,
logoutUrl: this.logoutUrl
};
};
});
app.factory('authInterceptor', function($q, keycloakLauncher) {
return {
request: function (config) {
var deferred = $q.defer();
var keycloak = keycloakLauncher.keycloak;
console.log("authint", keycloakLauncher.loggedIn);
if (keycloak.token) {
keycloak.updateToken(5).success(function() {
config.headers = config.headers || {};
config.headers.Authorization = 'Bearer ' + keycloak.token;
deferred.resolve(config);
}).error(function() {
deferred.reject('Failed to refresh token');
});
}
return deferred.promise;
}
};
});
app.factory('errorInterceptor', function($q) {
return function(promise) {
return promise.then(function(response) {
return response;
}, function(response) {
if (response.status == 401) {
console.log('session timeout?');
logout();
} else if (response.status == 403) {
alert("Forbidden");
} else if (response.status == 404) {
alert("Not found");
} else if (response.status) {
if (response.data && response.data.errorMessage) {
alert(response.data.errorMessage);
} else {
alert("An unexpected server error has occurred");
}
}
return $q.reject(response);
});
};
});
app.config(function($httpProvider, keycloakLauncherProvider) {
keycloakLauncherProvider.keycloak = new Keycloak('WEB-INF/keycloak.json');
keycloakLauncherProvider.logoutUrl = "https://localhost:8443/auth/realms/unika/tokens/logout?redirect_uri=http://unika.localdomain/index2.html";
$httpProvider.interceptors.push('errorInterceptor');
$httpProvider.interceptors.push('authInterceptor');
});
app.run(['keycloakLauncher','$rootScope',function(keycloakLauncher,$rootScope) {
console.log("runner")
$rootScope.loggedIn = false;
keycloakLauncher.keycloak.init({ onLoad: 'check-sso' }).success(function () {
console.log("entro");
keycloakLauncher.loggedIn = keycloakLauncher.keycloak.authenticated;
console.log("login", keycloakLauncher.loggedIn);
$rootScope.loggedIn = true;
}).error(function () {
window.location.reload();
});
}]);