angular - 处理菜单组件中的权限

Question

我想在我的 Angular 4 应用程序中开发一个组件，用于管理我的应用程序仪表板中的菜单。

我的问题是我有不同类型的用户（'admin'，'expert'，'manager'，...），对于每个用户，菜单中都有一个项目列表，因此每个用户都有不同的菜单.

经过一些研究，我发现了一个管理权限和角色的ngx-permissions库

谁能给我构建菜单组件的方法或逻辑，换句话说，如何继续处理菜单组件中的权限

Answer 1

您可以尝试做的是创建一个 ts 文件，例如：

AsnetUserDTO .ts 文件

export class AspNetUsersDTO extends EntityBase {

    constructor(values: Object = {}) {
        super();
        Object.assign(this, values);
    }


    public firstName: string;
    public fullName: string;
    public lastName: string;
    public userName: string;
    public securityStamp: string;
    public email: string;
    public emailConfirmed: boolean;
    public phoneNumber: string;
    public phoneNumberConfirmed: boolean;
    public twoFactorEnabled: boolean;
    public lockoutEndDateUtc: any;
    public lockoutEnabled: boolean;
    public accessFailedCount: number;
    public roles: string[];
    public passwordHash: string;
    public logins: any[];
    public claims: any[];

    public imageProfile: string;
    public thumbImageProfile: string;
    public primaryColor: string;

}

ROLEGUARD.ts 文件：

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);
                this.router.navigate(['login']);
                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);
                this.router.navigate(['login']);
                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']);
            });
        });

    }
}

那么你可以在你的路由文件中使用它，比如（app.routing.ts）：

{
        path: 'awards-team',
        component: AwardsTeamComponent,
        canActivateChild: [RoleGuard], // for child route you pass before in RoleGuad file and it check if roles are the same as your current user
        children: [
          {
            path: 'admin',

            component: TeamComponentsComponent,
            data: { roles: ['super-admin', 'admin'] }
          },
          {
            path: 'user',
            component: TeamComponentsComponent
          }
        ]
      }

希望对你有帮助