change - page title angular 4

¿Cómo administrarías los roles y permisos de usuario usando Angular 2?

Question

Estoy trabajando en una nueva aplicación Angular2, y me preguntaba cómo administrarías las rutas accesibles a ciertos roles y permisos para crear, editar y eliminar elementos para ciertos roles.

Quiero saber cómo resuelves el problema de esta manera:

• ¿Cómo gestionas el acceso a algunos elementos de la interfaz de usuario? ¿Cómo sabe la aplicación para mostrarlo u ocultarlo? ¿Utiliza servicio único para esto? ¿O creas diferentes condiciones para el lugar diferente en tu aplicación?

• ¿Cómo gestionas tu enrutamiento? ¿Utiliza CanActivate, CanActivateChild, CanLoad y etc? ¿Crea un único servicio de protección para todas las rutas o realiza diferentes servicios para diferentes módulos o componentes?

• Y la última pregunta. ¿Cuál es la mejor manera de dividir la aplicación y luego venderla como un CMS? Quiero decir, ¿cómo podemos darnos cuenta de la posibilidad de cargar otros módulos del mercado, por ejemplo, y agregarlos a su aplicación?

¿Cómo resuelves el problema similar?

Cualquier orientación, experiencia o punteros a material que cubra estos temas es muy apreciado. Gracias por adelantado.

Answer 1

Así que tuve que implementar algo como esto en una aplicación que resolví, así es como lo manejé.

Creé un servicio de autenticación, este contenía un método que verificaba si el usuario tenía un rol de administración:

auth.service.ts

public isManager(): boolean {
let isManager = false;
let user = this.getUserToken();
//Stored my allowed groups in a config file, comma separated string
let allowedGroups = AuthenticationParams.filters.split('','');
let userGroups: any;
if (user !== null && user !== undefined) {
try {
let userGroups: any = user.role;
if (userGroups !== undefined && userGroups !== null && userGroups.length > 0) {
try {
userGroups.forEach((e: any) => {
if (allowedGroups.indexOf(e) > -1) {
isManager = true;
}
});
} catch (e) {
if (allowedGroups.indexOf(userGroups) > -1) {
isManager = true;
}
}
}
} catch (e) {
isManager = false;
}
}
return isManager;
}
public getUserToken(): any {
return localStorage.getItem(''jwtTokenName'');
}

He creado un protector de autenticación de la siguiente manera:

guard.ponent.ts

import { Injectable, OnInit } from ''@angular/core'';
import { CanActivate, CanActivateChild } from ''@angular/router'';
import { Router } from ''@angular/router'';
import { AuthenticationService } from ''../services/helper/security/auth.service'';
@Injectable()
export class GuardComponent implements CanActivate {
constructor(private authenticationService: AuthenticationService, private _router: Router) {
}
canActivate() {
let isManager: boolean = this.authenticationService.isManager();
if (!isManager) {
this._router.navigate([''unauthorized'']);
}
return isManager;
}
}

guard.module.ts

import { NgModule } from ''@angular/core'';
import { CommonModule } from ''@angular/common'';
import { GuardComponent } from ''./guard.component'';
@NgModule({
declarations: [],
imports: [ CommonModule ],
exports: [],
providers: [ GuardComponent ],
})
export class GuardModule { }

Luego utilicé la guarda para mi ruta que maneja la navegación a la sección de administración

app-routing.module.ts

{ path: ''management'', component: AdminComponent, canActivate: [GuardComponent] }

En mi barra de navegación, solo llamo al método isManager y lo isManager en una variable y lo uso para determinar si el enlace de administración debe mostrarse o no.

navbar.component.ts

public isManager: boolean = false;
ngOnInit(): void {
this.isManager = this.authenticationService.isManager();
}

navbar.component.html

<li [routerLinkActive]="[''active'']" *ngIf="isManager"><a [routerLink]="[''management'']">Management Portal</a></li>

He tenido que eliminar algunos datos de cada método, pero esto te dará una idea básica. Esperemos que esto ayude.

Answer 2

Como se mencionó en los comentarios a su pregunta, una respuesta completa está más allá del alcance de una pregunta / respuesta SO, por lo que puede encontrar su pregunta cerrada en un futuro cercano por esa razón, pero aquí hay algunas sugerencias rápidas para que las explore más a fondo. tu propio:

• Obtenga los permisos del usuario del servidor durante / después del inicio de sesión a través de http / https. Almacene estos permisos en algún lugar que tenga sentido para su aplicación, tal vez en un servicio. Si está utilizando JWT, los permisos se pueden devolver en el token de JWT.

• Para simplificar las cosas, solo lidiar con los permisos en el cliente. Los roles son para que el código del servidor determine qué permisos tiene el usuario. No hay necesidad de arruinar las cosas al combinar roles con permisos en el cliente.

• Proteger rutas con auténticos guardias.

• Protege los elementos individuales de la interfaz de usuario con * ngIf o ngSwitch / * ngSwitchCase

• La carga dinámica es un área de gran tema, lea acerca de esto, muchos recursos en la web. Sin embargo, por lo que sé, aunque puede cargar módulos con pereza, la aplicación debe conocerlos en tiempo de compilación. Puede que me equivoque, pero no creo que solo puedas cargar lo que quieras en el tiempo de ejecución.

Answer 3

Esta pregunta es bastante amplia y no creo que puedas cubrirla fácilmente en esta respuesta. Básicamente hay tres cosas que se le atribuyen.

• Enrutamiento
• Guardias
• Módulos

Debe tener un módulo de protección único que verificará la aplicación completa y todas las rutas secundarias serán secundarias para la ruta de protección. En resumen, actuará como un guardia global para toda su aplicación. Y su ruta será cubierta en breve. Más sobre Guards

Y ahora, hablando de módulos, debe dividir todo en módulos comunes y destacados y reutilizar los módulos o usarlos de forma independiente. Esto te ayudará a venderlo como un CMS. Más sobre Modules .

Nota: esta no es una respuesta exacta, sino un problema para su problema