Angular 2路由角色守卫

Question

目前，我正在使用angular2 rc.4。但是在不久的将来，我会将我的应用程序更新为rc.6。

我的任务是确定活动路由，我想通过后台角色的用户角色/类型/任何方式实施路由保护。

我的一个应用程序对所有用户开放，另一个应用程序在后台。

后台的某些路线：

{
    path: "proposal",
    component: ProposalCmp,
    data: {
        authList: [
            ROLES_DATA.ADMIN,
        ]
    }
},
{
    path: "proposal/:id",
    component: ProposalCmp,
    data: {
        authList: [
            ROLES_DATA.ADMIN,
            ROLES_DATA.CUSTOMER
        ]
    }
},

在应用程序初始化阶段，路由由authList角色过滤，以防止在动态菜单上显示所有链接。如果某种类型的用户看不到它，则不会显示它，并且可以正常工作。

但是在第一次加载（重新加载页面）时，我遇到了一些问题。例如，如果我以customer身份登录，则只能查看proposal/:id，也可以查看proposal。

所以我决定写路由防护：

@Injectable()
export class RouteGuard implements CanActivate {
    constructor(private tokenService: TokenService,
                private router: Router,
                private activatedRoute: ActivatedRoute) {
    }

    public canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
        // this.router.isActive(url=string|UrlTree, exact=true)
        // released in rc.5 - https://github.com/angular/angular/blob/2.0.0-rc.5/modules/%40angular/router/src/router.ts#L328
        console.log(state.url, this.router.url);

        return true;
    }
}

[最后，在第一页加载（重新加载页面）时，我只能从state.url获取正确的url，route对象似乎是默认值初始化的，route.data为route.url为空。

如果加载了应用程序并且激活了另一条路线，例如，通过单击链接，我将在route.data方法中获得正确的canActive()。

好吧，我可以导入所有路由的数组并遍历它们，但是如何解析路由路径proposal/:id并将其与可以从proposal/6中获得的state.url进行比较？很好，我还没有使用辅助，但是如果我愿意的话。我现在可以使用regexp，但我认为这不是将来的好选择。

我发现了类似的问题-Angular 2 routes current url with params

问题是：

• 为什么在加载应用程序时无法获得当前激活的路线快照，如何检测到它？ ActivatedRoute.url.subscribe()或其他订阅无效。
• 如何正确地比较proposal/6中的state.url和我的路径中的proposal/:id？
• 或者可能还有其他选择，我该如何检测活动路由，甚至还有其他解决方案？

Answer 1

请参见stackblitz中的示例

在您的app-routing.module.ts中

const routes: Routes = [
   {
       path: "admin",
       component: AdminOnlyComponent,
       canActivate: [RoleGuardService],
       data: { roles: ['admin']}
   },
   ...
}

在您的RoleGuardService中

import { Injectable } from '@angular/core';
import { UserRolesService} from './user-roles.service';
import { Router, ActivatedRouteSnapshot } from '@angular/router';
@Injectable({
  providedIn: 'root'
})
export class RoleGuardService {

  constructor(private getUserRoles: UserRolesService) { }

  canActivate(route: ActivatedRouteSnapshot): boolean {
    return route.data.roles.some( ai => this.getUserRoles.getRoles().includes(ai) );
  }
}

在UserRolesService中

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class UserRolesService {
   userRoles: string[] = [];

  constructor() { }

  setRoles(Roles: string[]){
    this.userRoles = Roles.slice(0);
  }

  getRoles(){
    return this.userRoles;
  }
}

当用户登录系统时设置角色，或从您的本地存储中获取这些角色。...

希望这对您有帮助。