Question

我正在尝试锁定XYZ组件，当一个用户登录到该应用程序并且另一个用户尝试登录时无法查看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返回类型更改为布尔值

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

如果你想要你可以使用observable并且不改变你的类型，但是你应该用 checkLogin 方法返回它

<link rel="stylesheet" type="text/css" href="../css/css.css" >
<img src="../img/beFluent1.jpg" alt="beFluent1logo" />

具有可观测量的角度5号卫队

3 个答案: