首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用auth.service的路由保护

使用auth.service的路由保护
EN

Stack Overflow用户
提问于 2018-06-10 06:22:12
回答 1查看 968关注 0票数 0

我正在尝试创建一个路由守卫来保护一些延迟加载的模块的安全,我有一个带有BehaviorSubject的身份验证服务,它保存当前用户和JWT令牌

当我调用卫兵时,它首先获取当前用户的默认值,然后在第二次尝试时才允许用户到达路由。

auth.service.ts:

代码语言:javascript
复制
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:

代码语言:javascript
复制
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();
  }
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-06-10 08:46:05

这是因为BehaviourSubject是如何工作的。当您对BehaviourSubject执行Subscribe操作时,它会立即返回最后一个值。这就是BehaviourSubject需要缺省值的原因。

在本例中,一旦AuthGuard被激活,它将调用订阅currentUser的方法isLogin,并返回undefined (取决于javascript执行的顺序)。基本上,您的AuthGuard不会等待您的函数getUserFromToken()完成。

当您使用ReplaySubject而不是BehaviourSubject时,您可以很容易地解决此问题。

private currentUser: ReplaySubject<User> = new ReplaySubject(1)

ReplaySubject初始化为1,它将缓存当前用户,但不会在不存在用户时触发。

目前,Authguard将等待有效的currentUser值,并且不会在currentUser未定义时触发

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/50779020

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档