Angular 5 Route Guard与可观察的

Question

当一个用户登录到应用程序并且另一个用户尝试登录时，我无法锁定XYZ组件。

用户登录时，我已将当前用户存储在本地存储中。
也是DB / API中的当前用户

如果用户登录并转到XYZ组件，则当前用户名将在api中更新，如果没有用户登录，则该值将为null。

有一个LockGuard，它将检查当前用户和数据库用户是否相同。 但是我从API返回的数据有问题。

这是我的代码：

canActivate(next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if(this.service.isLocked()) {
        return true;
    } else {
        this.router.navigate(['/login'])
        return false;
    }
}


public isLocked() {
  let user = this.getCurrentUser();
  this.checkCurrentUser().subscribe(item => {
      // not getting value here: Observable not working here.
      this.existingLockedUser = item.currentUser;

      return user.username == this.existingLockedUser ? true : false;
  });
}


public checkCurrentUser(): Observable<any> {
  let id = 1;
  let url = CONFIG.urls.lockedUser + '/' + id;
  return this.http.get(url)
      .map((res:any) => {
          return res;
      })
}


public getCurrentUser() {
  this.currentUser = JSON.parse(localStorage.getItem('currentUser'));
  return this.currentUser;
}

Answer 1

在Angular 5中，您可以像这样简单地做：

public checkCurrentUser() {
  let id = 1;
  let url = CONFIG.urls.lockedUser + '/' + id;
  return this.http.get(url);
}

Answer 2

函数isLocked不返回任何内容。 您可以从checkCurrentUser返回Observable并将其映射到所需的布尔值：

public isLocked() {
    let user = this.getCurrentUser();
    return this.checkCurrentUser().pipe(
        map(item => item.currentUser),
        map(currentUser => user.username == currentUser));
}

并在canActivate函数中返回Observable，并另外检查isLocked的值以重定向到您的登录页面：

public canActive() {
    return this.isLocked()
        .do(locked => {
            if(!locked) {
                this.router.navigate(['/login'])
            }
        })
   }

需要其他进口：

import { map } from 'rxjs/operators';
import 'rxjs/add/operator/do';

Answer 3

您应该将canActivate返回类型更改为boolean

    export class AuthGuard implements CanActivate, CanLoad {
        constructor(private router: Router) {
        }

        canActivate(route: ActivatedRouteSnapshot,  state: RouterStateSnapshot): boolean {
            if(!this.checkLogin()){
                this.router.navigate(['/login']);
                return false;
            }
            return true;
        }

        canLoad(route: Route): boolean {
                   return this.checkLogin();
        }

        checkLogin(): boolean {
            return false
        }
    }

如果您希望可以使用Observable且不更改类型，则应在checkLogin方法中将其返回

 @Injectable()
export class AuthGuard implements CanActivate, CanLoad {
    constructor(private authService: AuthService, private router: Router) {
    }

    canActivate(route: ActivatedRouteSnapshot,  state: RouterStateSnapshot): Observable<boolean> {

        var obs = this.checkLogin();    
        return obs.do(x => {
            if (!x) {
                this.router.navigate(['/login']);
            }
        });
    }

    canLoad(route: Route): Observable<boolean> {           
        return this.checkLogin();
    }

    checkLogin(): Observable<boolean> {
        return Observable.of(false);
    }
}