jak Rahul komentarzu mówi jedno rozwiązanie wyjęciu z pudełka jest bardziej prawdopodobne, co chcesz są Guard
..
Pamiętaj straży są tylko dla routingu .. więc tylko sprawdzić, czy użytkownik może uzyskać dostęp do trasy lub nie .. ale nie wyświetlać pojedynczego elementu w komponencie opartym na rolach lub czymkolwiek .. do tego proponuję użyć *ngIf
lub pokazać, aby renderować/wyświetlać lub nie niektóre elementy interfejsu użytkownika ...
Dla jednego strażnika na podstawie Role (nie tylko jeśli użycie jest autoryzowane czy nie) .. możesz zrobić coś takiego:
import { Injectable } from "@angular/core";
import { AuthService, CurrentUserService } from "app/shared/services";
import { Router, RouterStateSnapshot, ActivatedRouteSnapshot, CanActivate } from "@angular/router";
import { AspNetUsersDTO } from "app/shared/models";
import { Observable } from "rxjs/Rx";
@Injectable()
export class RoleGuard implements CanActivate {
constructor(private authService: AuthService,
private _currentUser: CurrentUserService,
private router: Router) {
}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
return new Promise<boolean>((resolve, reject) => {
if (!this.authService.isLoggedIn()) {
resolve(false);
return;
}
var currentUser: AspNetUsersDTO = new AspNetUsersDTO();
this._currentUser.GetCurrentUser().then((resp) => {
currentUser = resp;
let userRole = currentUser.roles && currentUser.roles.length > 0 ? currentUser.roles[0].toUpperCase() : '';
let roles = route && route.data["roles"] && route.data["roles"].length > 0 ? route.data["roles"].map(xx => xx.toUpperCase()) : null;
if (roles == null || roles.indexOf(userRole) != -1) resolve(true);
else {
resolve(false);
this.router.navigate(['login']);
}
}).catch((err) => {
reject(err);
this.router.navigate(['login']);
});
});
}
canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
return new Promise<boolean>((resolve, reject) => {
if (!this.authService.isLoggedIn()) {
resolve(false);
return;
}
var currentUser: AspNetUsersDTO = new AspNetUsersDTO();
this._currentUser.GetCurrentUser().then((resp) => {
currentUser = resp;
let userRole = currentUser.roles && currentUser.roles.length > 0 ? currentUser.roles[0].toUpperCase() : '';
let roles = route && route.data["roles"] && route.data["roles"].length > 0 ? route.data["roles"].map(xx => xx.toUpperCase()) : null;
if (roles == null || roles.indexOf(userRole) != -1) resolve(true);
else {
resolve(false);
this.router.navigate(['login']);
}
}).catch((err) => {
reject(err);
this.router.navigate(['login']);
});
});
}
}
a następnie można użyć w routingu jak:
{
path: 'awards-team',
component: AwardsTeamComponent,
canActivateChild: [RoleGuard],
children: [
{
path: 'admin',
component: TeamComponentsAdminComponent,
data: { roles: ['super-admin', 'admin', 'utente'] }
},
{
path: 'user',
component: TeamComponentsUserComponent,
data: { roles: ['utente'] }
}
]
}
Uprawnienia są jak Gwardii, można spojrzeć na strażników komponentów kątowej [Straży] (https://angular.io/api/router/CanActivate) Możesz również rzucić okiem na to [link] (https://rahulrsingh09.github.io/AngularConcepts/guard) –