當我重新加載我的頁面時，它總是轉到空白頁而不是同一個頁面。這背后的原因是canActivate方法在用戶重繪 頁面時被呼叫，該方法正在檢查用戶的權限，它不能立即獲得用戶資料。用戶資料會在幾秒鐘后出現。 有什么方法可以讓canActivate方法等到資料出現？我已經看了RxJS的頁面，但不明白如何做。 誰能給我一些建議呢？
建構式(private router: Router, private userDataService: UserDataService) {
userDataService.userData$.subscribe(
(data: User) => {
this.userData = userData --> 在幾秒鐘后出現
}
);
}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)。
觀察<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
{
const result = this.getUserData(route);
if (!result) {
this.blankPage()。
}
回傳結果。
}
public getUserData(): 觀察者<布爾> {
if (this.userData) {
檢查權限...
return of(true);
}
return of(false);
}
userdata.service.ts:
userDataSubscription: 訂閱。
用戶資料。BehaviorSubject<User> = new BehaviorSubject<User>(null)。
public userData$: Observable<User> = this.userData.asObservable（）。
private getUserData(): void {
const userData$ = new Observable(
subscriber => subscriber.next(new User()
).pipe(
delay(1000),
mergeMap((model: User) => this.getUserInfo(model)),
mergeMap((model: User) => this.getUserPermission(model))。
catchError((err, caught) => {
console.error('失敗')
回傳catch。
})
);
this.userContextDataSubscription = userData$.subscribe(
(data: User) => {
this.userData,next(model);
},
() => console.error('失敗')
);
}
uj5u.com熱心網友回復：
您可能希望在此使用 Angular resolver 而不是 guard。決議器可確保資料可用，并在路由加載之前加載。
有很多有用的教程，只需搜索 "Angular Resolver "即可。
一個決議器會回傳一個Observable。你可能想使用 RxJS 的過濾器和 take(1) 運算子。就像這樣：
resolve(
路線。ActivatedRouteSnapshot,
狀態。RouterStateSnapshot
): 觀察者<任何>|承諾<任何>|any {
return this.service.getMyData(route.paramMap.get('id')).pipe(
filter(x => !x),
取(1)
)
}
這里的過濾器確保資料是一個真實的值。然后take(1)基本上說我得到了我需要的東西。一切順利。
uj5u.com熱心網友回復：
canActive是一個異步方法，它意味著你可以回傳Observeble或Promise，路由將不會被加載，直到Observable/Promise被解決。
這里是一個正確的canActivate用法的例子：
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):
Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
{
回傳 this.userDataService.userData$ 。
.pipe(take(1))
.pipe(map(user => {
let result: boolean
// 檢查你的權限
if (!result) {
this.redirectToBlankPage();
return false;
}
return result;
}));
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/307507.html
標籤：