1

Me gustaría saber cual es la mejor manera de manejar los roles de usuario en Angular?.

El escenario es el siguiente: Tengo una apliación en Angular que consume un API REST hecho con Laravel, el mismo que me proporciona un token. La aplicación manejará 3 tipos de roles (administrador, estudiante, docente), las rutas estan protegidas por un servicio Guard

  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  {
    path: 'admin', component: DashAdminComponent, children: [
      {
        path: 'estudiantes', component: EstudiantesComponent, children: [
          { path: 'nuevo-estudiante', component: NuevoEstudianteComponent, canActivate: [GuardService] },
          { path: 'todos', component: ListaComponent, canActivate: [GuardService] },
          { path: 'editar/:id', component: EditarComponent, canActivate: [GuardService],  }
        ], canActivate: [GuardService]
      },
      { path: 'docentes', component: DocentesComponent, children:[
        { path: 'nuevo-docente', component: NuevoDocenteComponent, canActivate: [GuardService] },
        { path: 'lista-docente', component: ListaDocenteComponent, canActivate: [GuardService] },

      ], canActivate: [GuardService] }


    ], canActivate: [GuardService]
  },

El servicio Guard verifica si el token esta presente y es valido

  canActivate() {
    if (this.apiSerive.getLogged()) {
      return true;
    } else {
      this._router.navigate(['/login']);
      return false;
    }
  }

Sin embargo esta lógica (comprobar si el token es valido y esta presente) podría permitir que un usuario con rol estudiante pueda acceder a una ruta destinada a usuarios de rol administrador.

Cualquier sugerencia es bienvenida.

1 respuesta 1

1

Si entregas los privilegios del usuario junto a los datos de usuario cuando te autoriza el API, puedes hacer algo similar a:

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    let authorization = this.isLoggedIn();
    const privileges = route.data['privileges'];

    if(privileges){
      for(let priv of privileges) {
        authorization = authorization && this.getUser().hasPrivilege(priv);
      }
    }
    if (authorization) { return true ; }
    return false;
  }

  canAccess(privilege){
    return this.getUser().hasPrivilege(privilege);
  }

Y en tu módulo, específicamente en las rutas, algo similar a:

canActivate: [AuthService],
data: {privileges: ['administrador'] }

EDICIÓN

Arriba instancié route como ActivatedRouteSnapshot.

Según la documentación ActivatedRouteSnapshot y traducido mas o menos de forma entendible, contiene la información sobre la ruta asociada a un componente cargado en cierto momento. También puede ser usado para recorrer el árbol de estados de route.

Una de sus propiedades es data que contiene los datos estaticos y resueltos de la ruta cargada.

En data podemos, entonces, guardar datos que nos sean de utilidad, como privilegios, o para ser mas fiel a tu esquema, roles.

Por ejemplo, arriba, en mi canActivate trabajo con privileges, pero tú podrías cambiar todos esos privileges y llamarlos roles sin problema. Hay una parte donde pregunto si this.getUser().hasPrivilege(priv);, bueno, ese método lo tengo en mi modelo User (user.ts) y es algo así:

hasPrivilege(key: string) : boolean{
    if (!this.privileges) { return false; }        
    return this.privileges.filter(p => p.key === key).length > 0;
}

Privilegio es una propiedad de mi modelo user que entre otras cosas tiene:

export class User {
    id: number = null;
    name: string;
    full_name: string;
    email: string;
    privileges: Array<Privilege> = [];
    password: string;

... Que es otro modelo que tiene:

export class Privilege {
    id: number;
    key: string;
    name: string;
    description: string;
}

Como ves, en resumen obtengo mi usuario del servidor, canActivate se encarga de preguntar si el usuario (que viene con sus privilegios desde el servidor y me encargo de instanciarlo correctamente) tiene algún(os) determinado(s) privilegio(s) necesario(s) para la ruta en particular y devuelve true o false dependiendo de si cumple con los requisitos. Esos privilegios de esa ruta en particular que menciono, son los que defino en la propiedad data en la ruta por la cual preguntabas... básicamente estoy diciendo, cuando preguntes si el usuario canActivate, indica que requiere este(estos) privilegio(s)/rol(es).

2
  • Gracias Julio. Te entiendo perfectamente. Me podrias explicar el uso del parametro data: {privileges: ['adminstrador]}? Commented el 8 ago. 2018 a las 17:26
  • Edité la respuesta, quizás fui un poco enredado pero espero que se logre encaminarte.
    – Julio Lago
    Commented el 8 ago. 2018 a las 18:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.