angular - 如果用户未登录，则阻止页面呈现

Question

我正在使用延迟加载在我的应用程序中呈现页面。

{ path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule', canActivate: [AuthGuard] }

问题是，如果我在 URL 中键入 www.mydomain.com/dashboard，浏览器实际上会呈现仪表板页面，即使用户没有登录并且在一两秒后重定向到登录屏幕。

如果用户未登录，如何防止浏览器呈现任何页面？基本上它应该直接重定向到登录页面。

AuthGuard 类

export class AuthGuard implements CanActivate {

  result: boolean = false;
  auth: any;
  outRes: any;


  constructor(private _authService: JwtService, private _router: Router) {

  }

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    this.outRes = this._authService.isAuthenticated();

    if (this.outRes) {
      this.outRes.subscribe(o => o ? true : this._authService.redirectToLogin());

      return true; 
    } else {

      this._authService.redirectToLogin();
      return false;
    }

  }

}

服务等级

  public isAuthenticated() {

    if (!this.loggedIn)
      this.redirectToLogin();

    return this.httpClient.get<boolean>(`${this.settings.getApiSettings('uri')}/api/auth/IsTokenValid`, {
      params: { token: this.getToken }
    }).map( /// <<<=== use `map` here
      (response) => {

        if (response !== null) {

          var receivedToken = response["securityStamp"];
          var availableToken = localStorage.getItem('access_token');

           //Check if received a refreshed token. (tokens are refreshed every 15 minutes)
          if (receivedToken && receivedToken !== availableToken) {

            localStorage.removeItem('access_token');
            localStorage.setItem('access_token', response["securityStamp"]);

          }

        }

        let data = response;
        if (data == null)
          return false;
        else
          return true;

      }
    );

  }

  redirectToLogin() {

    localStorage.removeItem('access_token');
    window.location.href = "./login";

  }

Answer 1

您的主要问题是 thisif (this.outRes)和 this o => o ? true : this._authService.redirectToLogin()，您总是会得到true，因为您的函数将始终返回响应，并且永远不会为空；您基本上是在检查是否有响应，但不是什么类型的响应（真/假）；

 canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    let isAuth: any;
    this._authService.isAuthenticated()
       .subscribe(response => isAuth = response); //<== this can true or false based on service

    if (!isAuth) {
      this._authService.redirectToLogin();
    }
     return isAuth;
  }