Question

我正在尝试对应用程序实施身份验证保护。

我在authGuard ts文件中编写的代码是：

balance_account

我的路由模块如下：

import {Injectable} from '@angular/core';
import {UserService} from '../../services/user.service';
import {CanActivate, Router} from '@angular/router';

@Injectable()
export class AuthService implements CanActivate {

  constructor(private userService: UserService,
              private router: Router) {
  }

  canActivate(): boolean {
    const token = sessionStorage.getItem('token');
    if (!token) {
      this.router.navigate(['login']);
      return false;
    } else {
      this.userService.getAuthenticatedUserDetails()
        .then(data => {
          if (data) {
            return true;
          } else {
            this.router.navigate(['login']);
            return false;
          }
        })
        .catch(error => {
          this.router.navigate(['login']);
          return false;
        });
    }
  }
}

据我所知，身份验证卫士工作正常。但是，即使身份验证防护返回true，我的应用也会重新路由到 localhost：4200 ，而不是 localhost：4200 / me

我找不到原因。请帮我解决它。

Answer 1

还没有尝试过诺言，但是您一定要兑现诺言。使用Observables，您可以尝试：

return this.userService.getAuthenticatedUserDetails()
    .pipe((map(data) => {
      if (data) {
        return true;
      } else {
          this.router.navigate(['login']);
          return false;
      }

    }),catchError(e => {
      this.router.navigate(['login']);
      return throwError(false);
    }))

Answer 2

您应该使用此模式：

 canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): 
              Observable<boolean> | Promise<boolean> | boolean { 
const token = sessionStorage.getItem('token');
if (!token) {
  this.router.navigate(['login']);
  return false;
} else {
  this.userService.getAuthenticatedUserDetails()
    .then(data => {
      if (data) {
        return true;
      } else {
        this.router.navigate(['login']);
        return false;
      }
    })
    .catch(error => {
      this.router.navigate(['login']);
      return false;
    });
   }
 }

Answer 3

我不确定是因为我没有尝试过，但我认为是因为您没有使用next和observable

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | boolean {
    const token = sessionStorage.getItem('token');
    if (!token) {
      this.router.navigate(['login']);
      return false;
    } else {
      this.userService.getAuthenticatedUserDetails()
        .then(data => {
          if (data) {
            return true;
          } else {
            this.router.navigate(['login']);
            return false;
          }
        })
        .catch(error => {
          this.router.navigate(['login']);
          return false;
        });
    }
  }

Answer 4

您是否已将else添加到continue的provider数组中，这可以解决您的问题吗？

if

AuthGuard路由到角度7中的''

4 个答案: