Cómo implementar control de acceso basado en roles a través de programación de ejemplo
Para resolver el requisito 1 anterior, capturamos el evento de cambio de ruta y verificamos cada cambio de ruta para ver si el usuario está autorizado a acceder a la siguiente ruta para asegurarnos de que no verá la página de acceso denegado
$rootScope.$on("$routeChangeStart", function(event, next, current) {
if(!authService.isUrlAccessibleForUser(next.originalPath))
$location.path('/authError');
});
El authService anterior es un servicio que creamos. Tiene una lista de usuarios de roles y enruta el tráfico a los autorizados. usuarios. La función isUrlAccessibleForUser() verificará si el usuario asignado puede acceder al tráfico dado y devolverá verdadero o falso.
El servicio obtendrá una lista de los roles del usuario en segundo plano y la información de acceso de enrutamiento, y cada rol guardarse en una colección de mapas del propio servicio. (Algunos detalles sobre usuarios y roles se pueden guardar en la oficina de datos y obtenerse en segundo plano)
app.factory('authService', function ($http) {
var userRole = []; // obtenido del backend var userRoleRouteMap = {
'ROLE_ADMIN': [ '/dashboard', '/about-us', '/authError' ],
'ROLE_USER': [ '/usersettings', '/usersettings/personal', '/authError']
};
return {
userHasRole: función (rol) {
for (var j = 0; j < userRole.length; j++) {
if (rol == userRole[j]) {
devuelve verdadero;
}
}
devuelve falso;
},
isUrlAccessibleForUser: función (ruta) {
for (var i = 0; i < userRole.length; i++) {
var role = userRole[i];
var validUrlsForRole = userRoleRouteMap[rol];
if (validUrlsForRole) {
for (var j = 0; j < validUrlsForRole.length; j++) {
if (validUrlsForRole[j] == ruta)
devuelve verdadero;
}
}
}
return false;
}
};
});
Esto resolverá el primer punto de los requisitos anteriores. creemos una instrucción.
La información de este comando es similar a la siguiente:
Si el usuario tiene el rol de ROLE_ADMIN, el La etiqueta HTML anterior se cargará en la página HTML; de lo contrario, esta etiqueta HTML se eliminará de la página.
El código de implementación de la directiva es el siguiente:
.directive('myAccess', ['authService', 'removeElement', function (authService, removeElement) {
return{
restringir: 'A',
enlace: función (alcance, elemento, atributos) {
var hasAccess = false;
var acceso permitido = atributos.myAccess.split(" ");
for (i = 0; i < acceso permitido.longitud; i++) {
if ( authService.userHasRole( AllowAccess[i])) {
hasAccess = true;
break;
}
}
if (!hasAccess) {
angular.forEach(element.children(), function (child) {
removeElement(child);
});
removeElement(elemento);
}
}
}
}]) .constant(' removeElement', function(element){
elemento && element.remove && element.remove();
});
Este método es muy simple y hemos implementado inteligentemente la autorización del usuario en la GUI. Un problema potencial es que si el renderizador de la interfaz de usuario ya se está ejecutando antes de obtener el rol de usuario en segundo plano, entonces se eliminarán todas las partes del HTML con esta instrucción. el html. Esto no es un problema para nosotros ya que obtendremos los detalles de la función del usuario cuando se complete el inicio de sesión. Si este problema es un problema para usted, la solución puede ser esta: si no se ha obtenido el rol de usuario, simplemente oculte estos elementos html, solo espere hasta obtener la lista de roles y luego muévalos de acuerdo con la información de autorización 0. Deshágase de él. Al mismo tiempo, tenga en cuenta que no puede omitir la implementación de seguridad inherente en segundo plano solo porque tiene un control de acceso GUI.