在Angular中,可以使用rxjs中的from
函数将Promise转换为Observable,然后使用switchMap
操作符等待Promise响应。以下是一个示例:
AuthGuard
守卫类,实现CanActivate
接口:import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable, from } from 'rxjs';
import { switchMap } from 'rxjs/operators';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable | Promise | boolean {
// 模拟异步操作,返回一个Promise
const promise = new Promise((resolve, reject) => {
// 假设异步操作需要1秒钟
setTimeout(() => {
// 假设用户已登录
const isAuthenticated = true;
resolve(isAuthenticated);
}, 1000);
});
// 将Promise转换为Observable,并等待其响应
return from(promise).pipe(
switchMap(isAuthenticated => {
if (isAuthenticated) {
return Observable.of(true);
} else {
// 跳转到登录页
this.router.navigate(['/login']);
return Observable.of(false);
}
})
);
}
}
AuthGuard
守卫:import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
import { AuthGuard } from './auth.guard';
const routes: Routes = [
{
path: 'home',
component: HomeComponent,
canActivate: [AuthGuard] // 使用AuthGuard守卫
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomeRoutingModule { }
在上述示例中,AuthGuard
守卫类使用from
函数将Promise转换为Observable,并使用switchMap
操作符等待Promise响应。根据Promise的响应结果,如果用户已登录,则返回Observable.of(true)
;如果用户未登录,则导航到登录页,并返回Observable.of(false)
。