Как установить пользовательские c маршруты в Angular?

Question

У меня есть приложение Angular 6, которое использует информацию о поставщике для определения функциональности (каналов) приложения. Я работаю с объектом, который я получаю с сервера после входа пользователя в систему и который предоставляет мне логические значения для соответствующих каналов.

providerInfos = {
  channels: {
    a: true,
    b: true,
    c: true
  }
}

В индексе. html У меня есть

<base href="/home/"> 

и в моем app-routing.module у меня есть

const routes: Routes = [
  { path: '', redirectTo: 'a', pathMatch: 'full' }, // Set /a as "start page".
  { path: 'a', component: AComponent, runGuardsAndResolvers: 'always' },
  { path: 'a/:id', component: ADetailsComponent },
  { path: 'b', component: BComponent },
  { path: 'c', component: CComponent }
];

Так, когда приложение инициализируется, A загружается (где-то.io/home/a). Пока это было хорошо, но из-за дальнейшего развития приложения выяснилось, что A также нельзя указывать в качестве канала. Это создало для меня проблему, которую я пока не смог решить. Чем больше я думаю об этом и смотрю на мой код, тем больше я думаю, что мой предыдущий подход в основном неверен.

При инициализации приложения я хочу иметь возможность отображать B или C в качестве первого или единственного представления (где-то.io/home/whothing), если A не является частью функциональности приложения. В принципе, я хочу предоставить приложению маршруты в соответствии с функциональностью, определенной для пользователя, через информацию о его провайдере, по крайней мере с

path: '', redirectTo: 'whatever', pathMatch: 'full'

, если задана только одна функциональность.

Я могу настроить функциональность через информацию о провайдере, так что меню в боковой панели настраивается, и я делаю компоненты, которые не являются частью функциональности, недоступными через * ngIf, если кто-то получает идею ввести пути в строке URL. Но я не могу настроить маршруты соответственно.

Как бы вы справились с этой проблемой. Есть ли лучшая практика для этого?

Answer 1

Вы можете использовать охрану маршрута для достижения этой функциональности. Маршрутизаторы не только запрещают пользователю доступ к маршруту, но и позволяют указать маршрутизатору, куда следует перейти, возвращая UrlTree.

При наличии следующих маршрутов:

const routes = [
  { path: '', redirectTo: 'a', pathMatch: 'full' },
  { path: 'a', component: ComponentA, canActivate: [AuthGuard] },
  { path: 'b', component: ComponentB }
];

Я могу настроить свой AuthGuard следующим образом:

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router, private userService: UserService) {
  }

  canActivate() : boolean | UrlTree {
    const user = this.userService.getCurrentUser();

    const userCanAccessA = false; // TODO: implement
    if (userCanAccessA) {
      return true;
    }

    // redirect to /b
    return this.router.parseUrl('/b');
  }
}

Я не рекомендую этот пример в качестве хорошей реализации, я просто демонстрирую возможности охраны маршрута. Ваши требования будут определять, как устроены ваши маршруты, и какова логика перенаправления c.

Может быть заманчиво заставить охранников выполнять большую работу. Вместо этого я бы сосредоточил внимание каждого охранника на выполнении конкретной задачи c. Затем вы можете составить лог логики защиты c, комбинируя охранники, если это необходимо.

Обратите внимание, что в моей демонстрации ниже компонент A никогда не создается, поскольку AuthGuard запрещает доступ до того, как произойдет маршрутизация.

ДЕМО: https://stackblitz.com/edit/angular-gxsb3m