路由器不导航到目标组件
Router does not navigate to targeted component
我有一个功能,如果用户的状态为 complete
,则将用户重定向到页面 Orders
,如果用户的状态不是 [=16],则重定向到 HOME
页面=].
Orders
页面有一个实现canActivate
的GuardService
,HOME
页面没有任何守卫。
我有一些拥有 R_ORDERS
权限且处于 complete
状态的用户根本没有导航。 (即它们既不会路由到 Orders
页面,也不会路由到 HOME
页面)。
我可以看到调用了检索用户权限的 HTTP 请求,但它们卡在该页面中。
我的问题与此 post 相关吗?
或到本文
enter link description here
此外,我尝试在可观察对象完成时添加日志,但在那种情况下,日志永远不会显示在控制台中。
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>>();
}
我不确定*是否完全理解您的问题,但根据阅读,我看到了一些我想向您推荐的东西。我在 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 一个值的问题。
我有一个功能,如果用户的状态为 complete
,则将用户重定向到页面 Orders
,如果用户的状态不是 [=16],则重定向到 HOME
页面=].
Orders
页面有一个实现canActivate
的GuardService
,HOME
页面没有任何守卫。
我有一些拥有 R_ORDERS
权限且处于 complete
状态的用户根本没有导航。 (即它们既不会路由到 Orders
页面,也不会路由到 HOME
页面)。
我可以看到调用了检索用户权限的 HTTP 请求,但它们卡在该页面中。
我的问题与此 post 相关吗?
或到本文 enter link description here
此外,我尝试在可观察对象完成时添加日志,但在那种情况下,日志永远不会显示在控制台中。
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>>();
}
我不确定*是否完全理解您的问题,但根据阅读,我看到了一些我想向您推荐的东西。我在 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 一个值的问题。