paso5
En este ejemplo mostramos un uso muy básico de roles y permisos en el front, con el propósito de mostrar al usuario solo los servicios sobre los que tiene permiso dependiendo de su rol.
En el ejemplo tenemos tres roles:
-
El rol administrador que tiene permiso sobre todos los servicios incluyendo la edición, creación, actualización y borrado de los objetos en la aplicación.
-
El rol cliente que no tiene permisos sobre edición, creación, actualización y borrado de los objetos en la aplicación. Si tiene permisos para crear un review.
-
El rol invitado, será el por defecto sin necesidad de hacer login, que tiene permisos solo para ver los elementos.
Aunque hay un login y sign up, estos servicios realmente no hacen nada. No estamos utilizando un servicio de autenticación verdadero.
Cuando alguien se registra o hace login,. en realidad la única cosa importante que tomados es su rol.
La configuración de lo que el usuario ve depende únicamente de su rol
Para definir los permisos sobre los elementos de la interfaz usuario vamos a utilizar el módulo externo NgxPermissions.
Debemos tener ese paquete en nuestro proyecto. Hay dos formas:
- Ejecutar:
npm install ngx-permissions --save
la opción --save actualiza el package.json.
- Directamente agregar la dependencia al
package.json:
"ngx-permissions": "^6.0.2",
y ejecutar:
npm install
En el módulo principal importar:
import {NgxPermissionsModule} from 'ngx-permissions';y luego en la anotación de los imports del módulo agregar:
> NgxPermissionsModule.forRoot(),En el diagrama podemos ver los elementos del módulo Auth. Tiene dos componentes: auth-login y auth-sign-up, un módelo para el usuario User y un servicio que define las funciones de login y logout y otras funciones para configurar los roles. En este ejemplo solo estamos usando los roles.
En esta clase se define los métodos para inicializar los roles y los permisos. Un permiso es una acción (atómica) que un usuario puede hacer dentro de la aplicación. Por ejemplo, edit_author_permission, create_editorial_permission.
Un rol es un conjunto nombrado de permisos. Varios roles pueden compartir un mismo permiso. Los roles son asignados a los usuarios.
La estrategia utilizada en este ejemplo es la siguiente:
- En el
localStorage(más info de local storage aquí ) se guarda bajo la llave "role" el role del usuario según se haya autenticado. Sino se ha autenticado no se guarda nada. - En el HTML se restringe el despliegue de elementos utilizando
*ngxPermissionsOnly. POr ejemplo:
*ngxPermissionsOnly="['ADMIN']"
significa que solo el rol ADMIN tiene permisos.
*ngxPermissionsOnly="['ADMIN', 'CLIENT']"
significa que solo rol ADMIN y el rol CLIENT tienen permisos.
- En las rutas también se define el acceso a ellas de acuerdo con el rol. Por ejemplo:
const routes: Routes = [
{
path: 'books',
children: [
{
path: 'list',
component: BookListComponent
},
{
path: 'add',
component: BookCreateComponent,
canActivate: [NgxPermissionsGuard],
data: {
permissions: {
only: ['ADMIN']
}
}
},
...Significa que para acceder a la ruta books/add se necesita el rol ADMIN.
| Más información del módulo de permisos NgxPermissionsModule pueden ser encontradas aquí. |
|---|