After fetching a list of permissions in the background, my goal is to display a page or an error message based on whether the user has the required permissions.
I encountered an unusual issue where both sections of the page are being displayed despite having one section with ng-show matching the permission function and another with the negated function. When I changed them both to use just the "isPermissioned" function, only the top one showed up while the bottom did not. It seems like they are receiving different values from the same function. Could this be due to the ordering of execution, causing one section to update before the other? Since I am binding to a function and not a variable, how can I ensure that the functions re-evaluate when there are changes?
The HTML code snippet is:
<div ng-controller="SEFlexHomeController" ng-show="isPermissioned">
<!-- Tab functionality here -->
</div>
<div ng-show="!isPermissioned">
<h3>You do not have the necessary permissions to view Secure Environment pages.</h3>
</div>
The JavaScript code is:
app.controller("SEFlexHomeController", ["$scope", "$http", "$modal", "$log", "$element", "$rootScope", "AlertsService", "AuthService", "SEApplicationService", function ($scope, $http, $modal, $log, $element, $rootScope, AlertsService, AuthService, SEApplicationService) {
$rootScope.closeAlert = AlertsService.closeAlert;
$scope.isDataLoading = false;
$scope.AuthService = AuthService;
// Function to determine if user is permissioned
$scope.isPermissioned = function() {
return AuthService.canAdministerFlex || AuthService.canViewFlexModels || AuthService.canRunFlexJobs || AuthService.canRunHighPriorityFlexJobs;
}
}
]);
The Auth service code is:
function AuthService($log, $http) {
var authService = {
// Boolean flags for different types of permissions
canRunFlexJobs: false,
canRunHighPriorityFlexJobs: false,
canViewFlexModels: false,
canApproveFlexModels: false,
canAdministerFlex: false
};
// Fetch user claims and update permission flags
authService.getUserClaims = function () {
$http.post("/Admin/Auth/GetUserClaims")
.success(function (response, status, headers, config) {
if (response) {
angular.forEach(response.data, function (item) {
// Update permission flags based on user roles
if (item.Value === "SEFlexJobRunner")
authService.canRunFlexJobs = true;
if (item.Value === "SEFlexHighPriorityJobRunner")
authService.canRunHighPriorityFlexJobs = true;
if (item.Value === "SEFlexModelViewer")
authService.canViewFlexModels = true;
if (item.Value === "SEFlexModelApprover")
authService.canApproveFlexModels = true;
if (item.Value === "SEFlexAdministrator")
authService.canAdministerFlex = true;
});
}
})
.error(function (reason, status, headers, config) {
console.log(reason);
});
}
// Call method to fetch user claims
authService.getUserClaims();
return authService;
};