npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@gecosuy/angular-auth

v16.0.2

Published

Librería para el manejo de autenticación y permisos (basados en roles y funcionalidades) de la forma standard para aplicaciones de API REST de Gecos

Downloads

14

Readme

angular-auth

Introducción

Librería para el manejo de autenticación y permisos (basados en roles y funcionalidades) de la forma standard para aplicaciones de API REST de Gecos.

Aquí se puede ver el modelo de dominio.

Se cubre una realidad donde la aplicación podría ser multi-tenant y además podría ser multi-empresa dentro de cada tenant.

Se basa en los siguientes conceptos:

Perfiles
Existen 3 tipos de perfiles de usuario:

  • Sistema: roles asociados a administración del sistema general (como ser CRUD de tenant, etc.)
  • Tenant: roles asociados a administración de un tenant (com oser CRUD de empresas, alta de usuarios para trabajar con las empresas, etc.)
  • Empresa: roles asociados a operar con las empresas (con una a la vez)

Roles
Los roles son agrupadores de funcionalidades.
Cada rol pertenece a un determinado perfil y solo uno.

Funcionalidades
Las funcionalidades indican acciones sobre el sistema.
Cada funcionalidad pertenece a un determinado perfil y puede estar agregada en varios roles (roles de ese mismo perfil).

Usuarios
Cada usuario tiene un conjunto de roles.
Además cada usuario puede tener un conjunto de funcionalidades asignadas propiamente para cada perfil.

Uso

Importación

Como primer paso se debe importar el AuthModule en el AppModule de la app cliente.

Luego se debe proveer la configuración al módulo por medio de un provider del estilo:

{
    provide: ANGULAR_AUTH_CONFIG,
    useFactory: getAuthConfig
}

Teniendo definida la función getAuthConfig que debe retornar una función que retorne un objeto AuthConfig, ver mas detalle en la documentación de este objeto.

El módulo requiere un fetcheo de metadata de permisos en el load de la app (cuando el usuario esta logueado), para ello en la app cliente se debe definir una función a ejecutar en el load de la app (APP_INITIALIZER de Angular) de la siguiente forma:

{
    provide: APP_INITIALIZER,
    useFactory: (auth: AuthService, permissions: PermissionService) => () => auth.isLoggedIn() ? permissions.init() : undefined,
    deps: [AuthService, PermissionService],
    multi: true
}

Por último, en el AppRoutingModule se debe llamar al registerAppRoutingModule de la siguiente forma para indicarle a la librería cuales son las rutas configuradas en la app para que luego se pueda tener disponible la consulta de permisos sobre las rutas:

export class AppRoutingModule {
    constructor(private permission: PermissionService) {
        this.permission.registerAppRoutingModule(routes);
    }
}

Uso de AuthService

Este service ofrece principalmente los siguientes servicios:

login

Permite hacer el login de un usuario.

Cuando se llama sin pasar extra data entonces si el usuario tiene un solo "perfil" posible se loguea normalmente en servidor y se retorna undefined indicando la situación, en cambio si el usuario tiene multiples "perfiles" posibles entonces se requiere seleccionar un tipo de perfil antes de loguearse, por lo que se requiere interaccion del usuario y luego una segunda llamada pasando extra data. En este caso se retorna un AuthLoginResponse indicando los diferentes "perfiles" del usuario para que se muestre una interfaz donde el usuario elija uno.

Cuando se llama pasando extra data conteniendo los parametros que determinan el perfil elegido entonces siempre se retorna undefined porque en estos casos ya se tiene el "perfil" con el que se quiere loguear al usuario y el login en servidor debería realizarse correctamente.

En el caso que se retorna undefined porque no se debe elegir perfil entonces el usuario queda logueado y se emite valor en el Observable loggedUser$.

logout

Realiza el logout, con algunas opciones que customizan el comportamiento:

  • excludeInformApi: determina si se debe informar o no al backend
  • excludeReload: indica si se debe recargar la pagina o no (se recarga en la url root '')

Se borra el token del localStorage y se emite valor undefined en el Observable loggedUser$ indicando que ya no hay usuario logueado.

loggedUser

Se expone un Obervable loggedUser$ que emite valores cada vez que hay un cambio en el usuario logueado. El valor es un objeto AuthLoggedUser con info del usuario, la info que puede ser extraida solamente del token.

Además se tiene un campo loggedUser que se puede consultar para obtener un snapshot del usuario logueado.

Uso de PermissionService

Este es un Service para manejar el permisado.

Tiene métodos directas para determinar si el usuario logueado tiene un determinado rol o una determinada funcionalidad, pero además tiene métodos para chequear permisos sobre módulos y rutas de la app, que es realizado tomando como base también los roles y funcionaldiades del usuario, pero obteniendo los roles y/o funcionaldiades requeridas de la metadata definida en las rutas de la app. A continuación se describen las 3 formas en que se puede utilizar este service.

Directo

Corresponde al uso directamente invocando sus métodos desde los puntos de código donde se requieran chequeos. Básicamente se tienen funcionaldiades para chequear permisos para:

  • un determinado módulo
  • una determinada ruta en particular
  • un determinado permiso (rol o funcionalidad) en particular

Guarda PermissionGuard

Otra forma de uso es mediante la guarda PermissionGuard adjuntada a rutas, indicando roles o funcionalidades requeridas.

Esta metadata en las rutas es definida en el campo 'data' que Angular ofrece para ello en la definición de las Routes. Dentro de ese data se pueden definir los siguientes campos en las rutas:

  • expectedProfiles: define IDs de perfiles que el usuario debe cumplir para permitir la ruta
  • expectedRoles: define IDs de roles que el usuario debe cumplir para permitir la ruta
  • expectedFuncionalities: define IDs de funcionalidades que el usuario debe cumplir para permitir la ruta

Si se definen ambos campos, se considera un OR de las condiciones.

Directiva *hasPermission

Otra forma de uso es por medio de la directiva *hasPermission para condicionar elementos en los templates. Básicamente su uso es idéntico al *ngIf de Angular. En este caso se condiciona una porción de HTML a que el usuario tenga el permiso requerido.

Uso del SendTokenInterceptor

Este es un interceptor para adjutnar el token en los header de todos los request enviados a la API.

Para configurarlo en la app se debe agregar el siguiente provider en el AppModule:

{
    provide: HTTP_INTERCEPTORS,
    useClass: SendTokenInterceptor,
    multi: true
}