Ленивый модуль загрузки на том же пути на основе охраны - PullRequest
Новая
       31

Ленивый модуль загрузки на том же пути на основе охраны

0 голосов
/ 12 апреля 2019

Я хочу загрузить определенный угловой модуль на основе роли пользователя по тому же ("") пути (домой). Допустим, у меня есть два модуля с именами AdminModule и OperatorModule. Если роль ADMIN, то я хочу загрузить AdminModule, иначе OperatorModule. Я хочу заархивировать это с помощью Angular Guard.

Теперь в app.routing.ts я добавил следующий код: 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AuthGuard } from './core/guards/auth.guard';

import { AdminModule } from './modules/admin';
import { OperatorModule } from './modules/operator';

const routes: Routes = [
   {
      path: '',
      loadChildren: () => AdminModule,
      canLoad: [ AuthGuard ],
      data: { role: 'ADMIN' }
   },

   {
      path: '',
      loadChildren: () => OperatorModule,
      canLoad: [ AuthGuard ],
      data: { role: 'OPERATOR' }
   },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Я реализовал AngularGuard со следующим кодом, который должен отображать OperatorModule: 

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

@Injectable({
   providedIn: 'root'
})
export class AuthGuard implements CanLoad {
   constructor(private router: Router) {}

   canLoad(route: Route): Promise<boolean> | boolean {
      if (route.data.role === 'OPERATOR') {
         return true;
      }

      return false;
   }
}

Каким-то образом он перестает смотреть после неудачного первого маршрута, я что-то не так делаю?

Пример StackBlitz от djerid: https://stackblitz.com/edit/angular-vd4oyu?file=app%2Fapp-routing.module.ts

===

Matcher также не работает: 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AuthGuard } from './core/guards/auth.guard';

import { AdminModule } from './modules/admin';
import { OperatorModule } from './modules/operator';

const routes: Routes = [
   {
      loadChildren: () => AdminModule,
      matcher: AdminMatcher,
      data: { role: 'NO' }
   },

   {
      loadChildren: () => OperatorModule,
      matcher: OperatorMatcher,
      data: { role: 'OPERATOR' }
   },
];

@NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
})
export class AppRoutingModule {
   constructor() {

   }
}


import { UrlSegment, UrlSegmentGroup, Route } from '@angular/router';
export function AdminMatcher(segments: UrlSegment[], group: UrlSegmentGroup, route: Route) {
   const isPathMatch = segments[0].path === route.path;

   if (isPathMatch && route.data.role === 'ADMIN') {
      return { consumed: [segments[0]] };
   } else {
      return null;
   }
}

export function OperatorMatcher(segments: UrlSegment[], group: UrlSegmentGroup, route: Route) {
   const isPathMatch = segments[0].path === route.path;

   if (isPathMatch && route.data.role === 'OPERATOR') {
      return { consumed: [segments[0]] };
   } else {
      return null;
   }
}

1 Ответ

0 голосов
/ 12 апреля 2019

Лучше всего использовать UrlMatchers вместо canLoad для этого, чтобы соответствовать каждой базе на ваших условиях, когда один из двух путей совпадает, другой будет автоматически игнорироваться 

 const routes: Routes = [{
  path: '',
  matcher: adminMatcher,
  oadChildren: () => AdminModule,
  data: { role: 'ADMIN' }
 },
 {
  path: '',
  matcher: operatormatcher,
  loadChildren: () => OperatorModule,
  data: { role: 'OPERATOR' }

 }]

проверьте это пример

...