我想守衛一條路線并執行以下操作：
- 檢查用戶是否在ngrx-store
- 如果用戶在商店中，則在 canActivate 處回傳 true
- 如果不創建 http-get 并接收用戶
- 如果用戶回來，將其存盤在 store 中并在 canActivate 上回傳 true
- 如果是 401，則回傳 false
這是我到目前為止得到的：
@Injectable({providedIn: 'root'})
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router, private store: Store<AppState>) {
}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
return this.store.select(selectUser).pipe(
take(1),
map(user => {
if (!!user) {
return true;
}
return this.authService.getUser$()
.pipe(
map(user => {
this.store.dispatch(addUser({user: user}));
return true;
})
)
})
);
}
}
錯誤：
Type 'Observable<true | Observable<boolean>>' is not assignable to type 'boolean | UrlTree | Observable<boolean | UrlTree> | Promise<boolean | UrlTree>'.
問題是 return this.authService... 回傳一個 Observable，它導致 Observable<Observable>。
我怎樣才能解開這個結？
uj5u.com熱心網友回復：
if (!!user) {
return true; // Returns a boolean - OK
}
return this.authService.getUser$()
.pipe(
map(user => {
this.store.dispatch(addUser({user: user}));
return true; // Returns an observable of a boolean - Not OK
})
)
替換為 switchMap ：
return this.store.select(selectUser).pipe(
first(),
switchMap(user => {
if (!!user) {
return of(true);
}
return this.authService.getUser$()
.pipe(
map(user => {
this.store.dispatch(addUser({user: user}));
return true;
})
)
})
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/480850.html
標籤：有角度的 httpclient ngrx 商店