读取next Route自定义数据，Angular 11

Question

我有一个这样的路由器对象

 const routes: Routes = [
    { path: '', component: LoginComponent },
    {
      path: 'admin-dashboard',
      loadChildren: () => import('@sample/timesheetlibs/admin-dashboard').then((m) => m.TimesheetlibsAdminDashboardModule),
      canActivate: [UserManagementGuardService],
      data: {
        permission: 'canRouteHome'
      }
    },
    {
      path: 'user-management',
      loadChildren: () => import('@sample/timesheetlibs/user-management').then((m) => m.TimesheetlibsUserManagementModule),
      canActivate: [UserManagementGuardService],
      data: {
        permission: 'canRouteUserManagement'
      }
    },      
  ];

现在我想读取下一条路线的自定义数据，例如我在admin-dashboard上，我想转到user-management，所以在UserManagementGuardService中，我想在导航之前读取data.permission，但不确定如何读取，请帮助。

Answer 1

在您的UserManagementGuardService中，您可以通过以下方式访问数据：

@Injectable()
class UserManagementGuardService implements CanActivate {
  constructor(...) {}

  canActivate(
    route: ActivatedRouteSnapshot
  ): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {
    const permission = route.data?.permission;
    ...
    return ...
  }
}

Answer 2

如果您需要将权限限制为“user-management”路由。然后您需要为它使用guard (如@Roman A)。描述。

或者，如果在解析路径之前只需要检索一些数据，则可以使用Resolvers，如下所示

{
  path: 'user-management',
  loadChildren: () => import('@sample/timesheetlibs/user-management').then((m) => m.TimesheetlibsUserManagementModule),
  canActivate: [UserManagementGuardService],
  resolve: { permission: PermissionResolver },
  data: {
    permission: 'canRouteUserManagement'
  }
}, 


@Injectable()
export class PermissionResolver implements Resolve<Permission> {
    constructor(private userService: UserService) {}

    resolve(route: ActivatedRouteSnapshot): Observable<Permission> {
        return this.userService.getPermission();
    }
}

// In a UserManagementComponent you can use it as 
export class UserManagementComponent {
    permission: Permission;

    constructor(public route: ActivatedRoute) {
        this.permission = this.route.snapshot.data.permission as Permission;
    }
}