angular - Angular 6 或更高版本中基于用户动态权限的访问路由

Question

我已经对登录的用户应用了基于 Angular 色的授权。JWT token 存储在 localStorage 中，路由根据登录和 auth.guard.ts 获得访问权限。

但除此之外，某些用户需要访问某些组件，而其他具有相同 Angular 色的用户则不需要。 JSON 数组定义了用户在登录后可以访问的路由。

为了完成这项工作，我定义的是检查组件的 ngOnInit。如果该组件存在于数组中，则应该允许它访问必须显示的其他 404 页面。

但我似乎没有找到这种有效的方法。

请建议我可以用插图做的任何即兴创作。愿以正确的方式做每一件事。

Answer 1

您可以对特定路由进行 Angular 色验证:

const routes: Routes = [
    {   //todo route you want to add validation for
        path: 'route',
        component: Component,
        canActivate: [AuthGuard],
        data: { roles: ["Admin"] } //recommend you dont use string here.
    },
    { path: '**', redirectTo: '' }
];

然后只需将这些行添加到您现有的 canActivate 函数中:

    let currentUser = User;
    if (route.data.roles && route.data.roles.indexOf(currentUser.role) === -1) {
        // role not authorised so redirect to home page
        this.router.navigate(['/']);
        return false;
    }

阅读文档 here .

编辑:

我建议您使用 Angular 色路由，因为它更易于维护且更加一致，但是您可以将类似这样的内容添加到您的 canActivate 函数中:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     let stateName: string = state.url.replace("/", "");
     let currentUser = User;
     if (currentUser.routePermissions.includes(stateName)) {
         // route not authorised so redirect to home page
         this.router.navigate(['/']);
         return false;
     }
}

可以使用路由对象来代替数组，并且只匹配实际的错误匹配。

user.routePermissions = {
    'route1': false
}

这将使维护更容易，因为您不需要为添加的新路由更新所有用户。