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);
    }
}