我目前正在使用后端的python API处理Angular网页。我想添加一个canActivate Guard,以确保用户位于管理员列表中,并位于另一台服务器上。
我的问题是,保护程序似乎没有等待API的响应,而是在保护程序本身中使用window.alert测试了它,并向我显示了“未定义”作为Output。当我在auth.service中测试我的方法时,我在console.log中得到了正确的响应,因此我的方法似乎返回了正确的布尔值,但是我的警卫似乎没有等待API的答复。
我得到了以下代码:
auth.service.ts:
import { HttpClient} from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { IAuth } from './IAuth';
@Injectable({
providedIn: 'root'
})
export class AuthService {
constructor(private http: HttpClient) { }
Acc: boolean;
getauth(): Observable<IAuth['Access']> {
return this.http.get<IAuth['Access']>('http://x.x.x.x:5555/auth');
}
get Access(): boolean {
this.getauth().subscribe( data =>
this.Acc = data);
return this.Acc;
}
}
这是我的auth.guard.ts:
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService} from './auth.service';
@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor (
private auth: AuthService,
private router: Router
) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
if (!this.auth.Access) {
this.router.navigate(['/noaccess']);
window.alert(this.auth.Access);
window.alert(this.auth.Acc);
}
return true;
}
}
我希望你们能帮助我解决这个问题,就像我说的那样,我在访问属性和方法时都在警卫中得到了错误的响应(未定义)。
答案 0 :(得分:1)
get Access(): boolean {
this.getauth().subscribe( data => this.Acc = data);
return this.Acc;
}
您不必等待HTTP调用完成,因此您的警卫也不必等待。改用它。
get Access(): Observable<any> {
return this.getauth().pipe(tap(data => this.Acc = data));
}
守卫然后成为
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this.auth.Access.pipe(map(res => {
if (!res) { this.router.navigate(['/noaccess']); }
return !!res;
}));
}