Ошибка навигации по маршруту при использовании охраны маршрута

Question

У меня есть охранник маршрута:

          import { Injectable } from "@angular/core";
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router";
import { Observable } from "rxjs";
import { ConfigurationService } from "./../configuration.service";
import { LoginServiceService } from '../login-service.service';
import { map } from 'rxjs/operators'
import { of } from 'rxjs';

@Injectable()
export class RoleGuard implements CanActivate {
  activate = false;

  constructor(private loginService: LoginServiceService,
    private router: Router,
    private configService:ConfigurationService
  ) {
  }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | boolean {

    return this.loginService.userRights().pipe(
      map((userRights) => {
        this.filterUserRights(userRights['rights'])
      }),
    );
  }

  filterUserRights(userRights:Array<string>):Observable<boolean> {
    console.log(userRights)
    const requiredRights = ['create_organisation', 'create_tenant', 'create_user'];
    if (requiredRights.some((right) => userRights && userRights.includes(right))) {
      this.activate = true;
    } else {
      this.activate = false;
    }
    return of(this.activate);
  }

}

У меня есть родительский маршрут, например:

  { path: "", redirectTo: "mylearning", pathMatch: "full" },
  {
    path: "managepeople",
    component: ManagepeopleComponent,
    canActivate: [RoleGuard],

    children: [
      { path: "", redirectTo: "organisations", pathMatch: "full" },
      {
        path: "organisations",
        component: OrganisationsComponent,
        data: {
          animation: "organisations"
        },

      },
]
}

Я использую роль стража на родительском маршруте.Проблема в том, что когда я обновляю браузер для ex, по маршруту: managepeople / organization, он не идет по этому маршруту, а перенаправляет на URL-адрес корневого компонента. Права пользователя исходят от службы, которая будет получать некоторые данные с сервера.,Как мне это исправить?

Моя сервисная функция:

  userRights() {
    var uiRolesUrl = this.config.restRequestUrl + "userapi/myrights/";
    var observable = this.http.get(uiRolesUrl);
    return observable;
  }

Answer 1

Как видите, canActivate может возвращать Observable или Promise, что позволяет выполнять асинхронные операции.Поэтому вам нужно написать это асинхронно, чтобы обработать случай, когда роль пользователя еще не выбрана.Что-то вроде:

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot,
  ): boolean | Observable<boolean> {
    if (this.configService.userRights) {
      return this.filterUserRighs(this.configService.userRights);
    }

    return this.configService.getUserRights.pipe(
      map((userRights) => {
        return this.filterUserRighs(userRights);
      }),
    );
  }

  filterUserRighs(userRights) {
    const requiredRights = ['create_organisation', 'create_tenant', 'create_user'];

    if (requiredRights.some((right) => userRights && userRights.includes(right))) {
      this.activate = true;
    } else {
      this.activate = false;
    }
    return this.activate;
  }

Answer 2

Это сработало:

import { Injectable } from "@angular/core";
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router";
import { Observable } from "rxjs";
import { ConfigurationService } from "./../configuration.service";
import { LoginServiceService } from '../login-service.service';
import { map } from 'rxjs/operators'
import { of } from 'rxjs';

@Injectable()
export class RoleGuard implements CanActivate {
  activate = false;

  constructor(private loginService: LoginServiceService,
    private router: Router,
    private configService:ConfigurationService
  ) {
  }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | boolean {
    return this.loginService.userRights().pipe(map((userRights) => {
      return this.filterUserRights(userRights['rights']);
    }),
    )
  }

  filterUserRights(userRights:Array<string>){
    const requiredRights = ['create_organisation', 'create_tenant', 'create_user'];
    if (requiredRights.some((right) => userRights && userRights.includes(right))) {
      this.activate = true;
    } else {
      this.activate = false;
    }
    return this.activate;
  }

}