Question

我的Angular应用中有一个ProfileComponent，还有2个JSON文件-employees.json和managers.json

以前，我在profile.component.ts中使用了以下检查：

ngOnInit() {
    this.route.paramMap.subscribe(params => {
        const roleId = +params.get('role');
        const empId = +params.get('id');
        if (empId) {
            if (roleId === 1) {
                this.getEmployee(empId);
            } else if (roleId === 2) {
            this.getManager(empId);
            }
        }
    });
}

HTML：

<td (click)="viewEmployeeProfile(1, employee.id)">{{employee.fullName}}</td>
<td (click)="viewEmployeeProfile(2, manager.id)">{{manager.fullName}}</td>

如果roleId = 1，则显示来自employees.json的数据，如果roleId = 2，则显示来自managers.json的数据

这是我的方法：

getEmployee(id: number) {
    this.employeeService.getEmployee(id).subscribe(
        (employee: IEmployee) => this.displayEmployee(employee),
        (err: any) => console.log(err)
    );
}

getManager(id: number) {
    this.managerService.getManager(id).subscribe(
        (manager: IManager) => this.displayManager(manager),
        (err: any) => console.log(err)
    );
}

这是我服务中的方法：

Employee Service

baseUrl = 'http://localhost:3000/employees';

getEmployee(id: number): Observable<IEmployee> {
    return this.httpClient.get<IEmployee>(`${this.baseUrl}/${id}`)
        .pipe(catchError(this.handleError));
}

Manager Service

baseUrl = 'http://localhost:3000/managers';

getManager(id: number): Observable<IManager> {
     return this.httpClient.get<IManager>(`${this.baseUrl}/${id}`)
        .pipe(catchError(this.handleError));
}

这以前是可行的，但此后我决定添加canActivate()保护，以阻止用户使用无效ID导航到个人资料组件。

这是我的路线：

{
    path: 'profile/:role/:id', component: ProfileComponent,
    canActivate: [RequireEmployeeProfileGuardGuard]
}

这就是我的警卫：

canActivate(route: ActivatedRouteSnapshot): Observable<boolean | UrlTree> {
return this.employeeService.getEmployee(+route.paramMap.get('id')).pipe(
catchError(() => of(false)),
map(employee => !!employee || this.router.parseUrl('page-not-found'))
);
}

现在，当我搜索Employee时，该应用程序可以正常运行，因为它正在搜索employees.json。但是，如果我选择显示一个Manager，则失败，因为它正在employees.json中搜索Manager的ID。

有人可以指出我需要进行哪些更改，以便我的代码搜索正确的文件吗？

Answer 1

您可以像在组件中那样使用canActivate方法：

canActivate(route: ActivatedRouteSnapshot): Observable<boolean | UrlTree> {

    const roleId = +route.paramMap.get('role');
    const empId = +route.paramMap.get('id');

    if(roleId === 1) {
        //employee
        return this.employeeService.getEmployee(empId)
                   .pipe(
                        map(employee => {
                            if(employee) {
                                return true;
                            } else {
                                this.router.parseUrl('page-not-found');
                                return false;
                            }
                        })
                    );

    } else if(roleId === 2) {
        //manager
        return this.managerService.getManager(empId)
                    .pipe(
                        map(manager => {
                            if(manager) {
                                return true;
                            } else {
                                this.router.parseUrl('page-not-found');
                                return false;
                            }
                        })
                    );
    } else {
        //do not pass the guard
        of(false);
    }
}

为避免代码重复，您可以使用如下所示的高阶函数：

canActivate(route: ActivatedRouteSnapshot): Observable<boolean | UrlTree> {

    const roleId = +route.paramMap.get('role');
    const empId = +route.paramMap.get('id');
    const myMap = map(emp => {
        if(emp) {
            return true;
        } else {
            this.router.parseUrl('page-not-found');
            return false;
        }
    })
    if(roleId === 1) {

        return this.employeeService.getEmployee(empId)
                   .pipe(
                        myMap
                    );

    } else if(roleId === 2) {
        return this.managerService.getManager(empId)
                    .pipe(
                        myMap
                    );
    } else {
        //do not pass the guard
        of(false);
    }
}

如何根据路由参数指定调用方法？

1 个答案: