Question

我正在尝试根据自己的角色加载Angular模块（登录时）。我在Angular Guard上尝试了一下，但是没有用，当它失败时，它不会转到下一条路线。

const routes: Routes = [
   {
      path: '',
      loadChildren: () => AuthModule
      // Load when not logged in
   },

   {
      path: '',
      loadChildren: () => AdminModule
      // Load when admin
   },

   {
      path: '',
      loadChildren: () => CrewModule
      // Load when crew
   }
];

有关如何解决此问题的任何想法？我认为Angular Guard或使用匹配器不是解决此问题的正确方法...

编辑：对于每个路径/模块，我都有自己的防护对象，如下所示：

import { Injectable } from '@angular/core';
import { CanLoad, CanActivate, Route, Router } from '@angular/router';
import { AuthService } from '@app/core';

@Injectable()
export class AdminModuleGuard implements CanLoad {
   constructor(private authService: AuthService, private router: Router) {}

   canLoad(route: Route): boolean {
      const url: string = route.path;
      console.log('Admin Module Load Guard - Url:' + url);
      return false;
   }
}

谢谢！

贵族，雅尼克

Answer 1

好吧，我在考虑以下方面：

为不同类型的用户角色定义了不同的路由：

const routes: Routes = [
  { path: '/login', loadChildren: './auth/auth.module#AuthModule' },
  { path: '/admin', loadChildren: './admin/admin.module#AdminModule' },
  { path: '/crew', loadChildren: './crew/crew.module#CrewModule' }
];

然后在您的Guard Logic中：

import { Injectable } from '@angular/core';
import { CanLoad, CanActivate, Route, Router } from '@angular/router';
import { AuthService } from './authentication/services/auth.service';

@Injectable()
export class AuthGuardService implements CanLoad {
  constructor(
    private authService: AuthService,
    private router: Router
  ) {}

  canLoad(route: Route): boolean {
    let url: string = route.path;
    switch(url) {
      case '/login': {
        if(this.authService.isUserLoggedIn()) {
          this.authService.userRole === 'ADMIN' ? this.router.navigate(['/admin']) : this.router.navigate(['/crew']);
          return false;
        } else {
          return true;
        }
        break;
      }
      case '/admin': {
        if(this.authService.isUserLoggedIn()) {
          if(this.authService.userRole === 'ADMIN') {
            this.router.navigate(['/admin']);
            return true;
          } else {
            this.router.navigate(['/crew']);
            return false;
          }
        } else {
          this.router.navigate(['/login']);
          return false;
        }
        break;
      }
      case '/crew': {
        if(this.authService.isUserLoggedIn()) {
          if(this.authService.userRole === 'ADMIN') {
            this.router.navigate(['/admin']);
            return false;
          } else {
            this.router.navigate(['/crew']);
            return true;
          }
        } else {
          this.router.navigate(['/login']);
          return false;
        }
        break;
      }
      default: {
        this.router.navigate(['/login']);
        return false;
        break;
      }
    }
  }

}

Answer 2

您可以通过使用根模块的Injector访问AuthService实例，然后根据用户角色做出异步决定来加载一个模块或另一个模块来完成此操作。您可以在Injector文件中进行引导后立即访问main.ts，然后将其发布为RxJs主题（例如mySubject $），然后在路由定义中使用该主题。

// Get root module's injector and publish it via RxJs subject
platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then((m) => mySubject$.next(m.injector)) // <-- here
  .catch((err) => console.error(err));

您可以在Stackblitz

上找到此方法的有效示例。

基于角色的相同路径上的延迟加载模块

2 个答案: