Question

我正在尝试向Angular应用中的仪表板组件添加canActivate()保护。

当前，如果用户在登录表单上输入 any 用户名和密码，则防护措施将返回true。

这里是canActivate() Guard：

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.checkLoggedIn();
  }

  checkLoggedIn(): boolean {
    if (this.authService.isLoggedIn) {
      return true;
    }
    this.router.navigate(['/login']);
    return false;
  }

这是我的Typescript文件中的login()方法：

login(loginForm: NgForm) {
    if (loginForm && loginForm.valid) {
      const userName = loginForm.form.value.userName;
      const password = loginForm.form.value.password;
      this.authService.login(userName, password);

      // Navigate to the Dashboard after log in.
      this.router.navigate(['/dashboard']);
    } else {
      this.errorMessage = 'Please enter a user name and password.';
    }
  }

这是我的authService：

get isLoggedIn(): boolean {
    return !!this.currentUser;
  }

login(userName: string, password: string): void {
    if (!userName || !password) {
      return;
    }
    if (userName === 'admin') {
      this.currentUser = {
        id: 1,
        userName: userName,
        isAdmin: true
      };
      return;
    }
    this.currentUser = {
      id: 2,
      userName: userName,
      isAdmin: false
    };
  }

我想搜索Employees.json（我在服务器上托管的文件）来代替此功能。

下面是我的Employee Service中的一些代码：

baseUrl = 'http://localhost:3000/employees';

getEmployee(id: number): Observable<IEmployee> {
        return this.httpClient.get<IEmployee>(`${this.baseUrl}/${id}`)
            .pipe(catchError(this.handleError));
    }

getEmployees(): Observable<IEmployee[]> {
        return this.httpClient.get<IEmployee[]>(this.baseUrl)
            .pipe(catchError(this.handleError));
    }

有人可以告诉我如何使用用户输入的用户名和密码检查employees.json中是否存在用户名和密码吗？

此外，这是Employee对象的结构：

export interface IEmployee {
  id: number;
  username: string;
  password: string;
}

如何基于HTTP GET请求的结果建立canActivate（）保护？

0 个答案: