路由器不导航到目标组件

Question

我有一个功能，如果用户的状态为 complete，则将用户重定向到页面 Orders，如果用户的状态不是 [=16]，则重定向到 HOME 页面=].

Orders页面有一个实现canActivate的GuardService，HOME页面没有任何守卫。

我有一些拥有 R_ORDERS 权限且处于 complete 状态的用户根本没有导航。（即它们既不会路由到 Orders 页面，也不会路由到 HOME 页面）。

我可以看到调用了检索用户权限的 HTTP 请求，但它们卡在该页面中。

我的问题与此 post 相关吗？

此外，我尝试在可观察对象完成时添加日志，但在那种情况下，日志永远不会显示在控制台中。

return this.getList().subscribe((e) => {
        const right = new List(e).FirstOrDefault(
          (d) => d.code == securizedPath.keyCode
        )?.type;
        if (!right) return resolve("OFF");
        return resolve(right);
      },
        (error) => {
          console.log("Right store threw an error");
          console.log(error);
        },
        () => {
          console.log("Right list completed")
        }
);

感谢您的帮助

async redirectTo() {
  this.loading = true;
  this.userState = await this.stateService.getToPromise(this.userId);


  if (this.userState.isComplete) {
     this.orderService.init();
     this.router.navigate([RouteNames.ORDERS]);
     this.loading = false;
     return;
  }

  this.router.navigate([RouteNames.HOME]);
  return;
  
}

RouteNames.ORDERS 有以下守卫：

@Injectable({
  providedIn: "root",
})
export class GuardService implements CanActivate {
  constructor(
    private router: Router,
    private rightService: UserRightService
  ) {}
  canActivate(
    route: import("@angular/router").ActivatedRouteSnapshot,
    state: import("@angular/router").RouterStateSnapshot
  ):
    | boolean
    | import("@angular/router").UrlTree
    | import("rxjs").Observable<boolean | import("@angular/router").UrlTree>
    | Promise<boolean | import("@angular/router").UrlTree> {
    return this.test(route);
  }
  async test(route: ActivatedRouteSnapshot) {
    const right = await this.rightService.isRouteAllowed(route.url[0].path);
    if (right == "OFF") {
      this.router.navigate([RouteNames.FEATURE_UNAUTHORIZED]);
      return false;
    } else if (right != "ON") {
      this.router.navigate([RouteNames.FEATURE_UNAUTHORIZED]);
      return false;
    }
    return true;
  }


}

UserRightService 的代码是

 isRouteAllowed(route: string): Promise<Right> {

    const securizedPath = new List(this.securizedPaths).FirstOrDefault(
      (e) => e.name == route
    );
    return new Promise((resolve) => {
      return this.getList().subscribe((e) => {
        const right = new List(e).FirstOrDefault(
          (d) => d.code == securizedPath.keyCode
        )?.type;
        if (!right) return resolve("OFF");
        return resolve(right);
      });
    });
  }

securizedPaths定义如下 typescript[{ name: RouteNames.ORDERS, keyCode: "R_ORDERS" }, // other value ]

getList 是

 getList() {
    this.subjectList = new ReplaySubject<T[]>();
    this.load();
    return this.subjectList;
 }

protected load() {
      return this.getService()
        .getAll()
        .then((e) => {
          this.subjectList.next(e);
        })
        .catch((e) => {
          this.subjectList.next([]);
          this.subjectList = null;
        });
  }

// Code for this.getService().getAll()
  async getAll(id?: any, parameter?: any): Promise<Array<T>> {
    let urlParameters;
    ({ urlParameters, parameter } = this.createParameters(parameter, id));
    return this.http
      .get(this.url + (urlParameters ? "?" + urlParameters : ""))
      .toPromise<Array<T>>();
  }

Answer 1

我不确定*是否完全理解您的问题，但根据阅读，我看到了一些我想向您推荐的东西。我在 GuardService

中看到一些问题

@Injectable({
    providedIn: "root",
})

export class GuardService implements CanActivate {
    constructor(
        private router: Router,
        private rightService: UserRightService
    ) { }
    
    canActivate(
        route: import("@angular/router").ActivatedRouteSnapshot,
        state: import("@angular/router").RouterStateSnapshot
    ): Promise<boolean> {
        
        let resolver: (value: boolean | PromiseLike<boolean>) => void;

        const promise = new Promise<boolean>((resolve) => {
            resolver = resolve;
        });
        this.test(route, resolver);
        return resolver;
    }

    async test(route: ActivatedRouteSnapshot, resolver: (value: boolean | PromiseLike<boolean>)) {
        const right = await this.rightService.isRouteAllowed(route.url[0].path);
        if (right == "OFF") {
            this.router.navigate([RouteNames.FEATURE_UNAUTHORIZED]);
            return resolver(false);
        } else if (right != "ON") {
            this.router.navigate([RouteNames.FEATURE_UNAUTHORIZED]);
            return resolver(false);
        }
        return resolver(true);
    }
}

请参阅我以粗体突出显示的代码。

我猜你必须 return 一个承诺，该承诺将根据将收到的响应值在测试方法中解决。

我的提议完全基于一些假设，这些假设帮助我解决了过去 Gurad 的 CanActivte 方法想要异步 return 一个值的问题。

路由器不导航到目标组件

Router does not navigate to targeted component

angular

rxjs

angular-ui-router

observable

angular-router-guards