[英]Route guard with auth.service
我正在尝试创建一个路由守卫,以使某些延迟加载的模块保持安全,我有一个带有BehaviorSubject的身份验证服务,其中包含当前用户和JWT令牌
当我呼叫后卫时,它首先获取当前用户的默认值,并且仅在第二次尝试时才允许该用户到达该路由。
auth.service.ts:
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpResponse, HttpHeaders } from '@angular/common/http';
import { Observable, BehaviorSubject } from 'rxjs';
import { map, skip, takeLast, last } from 'rxjs/operators';
import { User } from '../shared/user';
import { environment } from '../../environments/environment';
@Injectable()
export class AuthService {
private loginUserToken: BehaviorSubject<string>;
private currentUser: BehaviorSubject<User>;
constructor(private http: HttpClient) {
// service init
this.loginUserToken = new BehaviorSubject(undefined);
this.currentUser = new BehaviorSubject(undefined);
this.loginUserToken.next(this.getTokenFromLocalStorege());
if (this.loginUserToken.value != null) {
this.getUserFromToken();
}
}
/**
* getLoginUser
*/
public getLoginUserAsObservable() {
return this.currentUser.asObservable();
}
public getLoginUserTokenAsObservable() {
return this.loginUserToken.asObservable();
}
public async login(user: User): Promise<any> {
// tslint:disable-next-line:no-shadowed-variable
return new Promise<any>(async (resolve: any, reject: any) => {
try {
const result: any = await this.http.post(`${environment.server}/api/auth/login`, user).toPromise();
if (result.massageCode === 1) {
reject('bedUsername');
} else if (result.massageCode === 2) {
reject('bed password');
} else {
this.loginUserToken.next(result.token);
this.getUserFromToken();
this.saveTokenToLocalStorege(result.token);
resolve();
}
} catch (error) {
reject('error');
}
});
}
public getUserFromToken(): void {
const headers = new HttpHeaders({
'x-access-token': this.loginUserToken.value
});
this.http.get(`${environment.server}/api/auth/userFromToken`, { headers }).toPromise()
.then((data: User) => {
this.currentUser.next(data);
})
.catch((error) => {
console.log(error);
});
}
public isLogin(): Promise<boolean> {
return new Promise((resolve, reject) => {
this.currentUser.asObservable()
.subscribe((data) => {
if (data) {
resolve(true);
} else {
resolve(false);
}
}).unsubscribe();
});
}
public saveTokenToLocalStorege(token: string): void {
localStorage.setItem('chanToken', token);
}
public getTokenFromLocalStorege(): string {
return localStorage.getItem('chanToken');
}
public removeTokenFromLocalStrege(): void {
localStorage.removeItem('chanToken');
}
}
auth.guaed.ts:
import { Injectable } from '@angular/core';
import { CanActivate, CanLoad, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from '../auth.service';
import { Route } from '@angular/compiler/src/core';
import { last, map } from 'rxjs/operators';
@Injectable()
export class AuthGuard implements CanLoad {
constructor(private authSerivce: AuthService, private router: Router) { }
canLoad(route: Route): boolean | Observable<boolean> | Promise<boolean> {
console.log('use gruad');
return this.authSerivce.isLogin();
}
}
那是因为BehaviourSubject
是如何工作的。 Subscribe
BehaviourSubject
它立即返回最后一个值。 这就是BehaviourSubject
需要默认值的原因。
在您的情况下,一旦激活AuthGuard
,它将调用您的方法isLogin
,该方法订阅currentUser
,并且它将返回undefined
(取决于javascript执行的顺序)。 基本上,您的AuthGuard
不会等待函数getUserFromToken()
完成。
使用ReplaySubject
而不是BehaviourSubject
时,可以轻松解决此解决方案。
private currentUser: ReplaySubject<User> = new ReplaySubject(1)
使用值1初始化ReplaySubject
,它将缓存当前用户,但是当不存在用户时将不触发。
现在您Authguard
将等待有效的currentUser
值,当不会着火currentUser
是未定义
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.