使用路由守卫时的路由导航问题

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"
        },

      },
]
}

我在父路由 managepeople 上使用角色守卫。问题是当我为 ex 刷新浏览器时，在路线上：managepeople/organisations，它不会转到该路由，而是重定向到根组件 url.The 用户权限来自一项服务，该服务需要从服务器获取一些权限。我该如何解决这个问题？

我的服务功能：

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

Answer 1

如您所见，canActivate 可以 return 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;
  }

}

使用路由守卫时的路由导航问题

Route Navigation issue when using route guard

angular-routing

angular7