0

我有 4 条路线，每条路线都有一个链接到它的权限（由后端提供 -> true/false）。这些权限授予登录用户访问特定路由的权限。

现在我的问题是，是否可以只设置一个警卫来检查所有链接权限，但只阻止链接权限为“假”的特定路线？

示例（4 个功能，具有 4 个权限）：

permissions: {
  permission_1": false, // matches /post/create
  permission_2": false, // matches /admin/post
  permission_3": false, // matches /admin/delete
  permission_4": true, // matches /subscribe
}

守卫只检查特定路由的匹配权限。换句话说，用户只能访问“/subscribe”路由，而不能访问其他三个。

4

2 回答 2

1

是的，你可以用一个 Guard 来做到这一点。您可以根据需要使用 CanActivate 或 CanActivateChild。

// Angular imports
import {
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
  UrlTree,
  Router,
} from "@angular/router";

@Injectable({
  providedIn: "root",
})

export class PermGuard implements CanActivate, OnDestroy {
  constructor(private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ):
    | Observable<boolean | UrlTree>
    | Promise<boolean | UrlTree>
    | boolean
    | UrlTree {
      const url: string = state.url;
      return this.checkPerms(url);
    }

  checkPerms(url: string): | Observable<boolean | UrlTree>| Promise<boolean | UrlTree> | boolean | UrlTree {
    // Check for Perms compared to URL that the app is routing to here.
    if (url.includes("create") {
      //check for perms for "create" url here...
    }
  }
于 2021-06-14T17:44:10.900 回答
1

首先，您需要创建一个 HTTP 请求，该请求获取带有 url 及其值的 json，如下所示。

 {
   home: true,
   rotue1:false
 }

创建一个实现 canActivate 接口的服务

@Injectable({
    providedIn: 'root'
})
export class EnabledUrlService implements CanActivate {

    constructor(private router: Router) {
    }

     canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
        return this.authService.getPermissions()
            .pipe(map((resoruce: any) => resource[route.data?.id])
     }
}

并将此服务包含在路由文件中

        {
            path: 'rotue1',
            component: RouteComponent,
            canActivate: [EnabledUrlService]
        },
        {
            path: 'home',
            component: HomeComponent,
            canActivate: [EnabledUrlService]
        }

希望能帮到你，有问题可以私信我

于 2021-06-14T18:03:45.243 回答