如何实现 Auth Guard : Angular

Question

我根据本地存储中的身份验证令牌创建了如下所示的身份验证保护。 如果本地存储中不存在令牌，则它正在工作并将用户重定向回登录页面。 但是如果令牌存在于存储中，那么我仍然可以转到登录页面。

问题：如果令牌存在于存储中，那么用户将无法返回登录页面。

Guard.ts

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
):
    | Observable<boolean | UrlTree>
    | Promise<boolean | UrlTree>
    | boolean
    | UrlTree {
    const isLoggedIn = this._spotify.isAuthenticated();
    if (isLoggedIn) {
        // authorised so return true
        return true;
    }

    // not logged in so redirect to login page with the return url
    this._logger.error('Not authenticated, redirecting...');
    this._router.navigate(['/'], {
        queryParams: { returnUrl: state.url }
    });
    return false;
}

认证服务

isAuthenticated(): boolean {
    if (localStorage.getItem('accessToken')) {
        return true;
    }
    return false;
}

Answer 1

如果你有这样的路线

{ path: '/login', component: LoginComponen}

您可以专门为它添加一个新的 authGuard

export class LoginGuard implements CanActivate {
  constructor(private _spotify: AuthService, private router: Router) {}

  canActivate(): Observable<any> {
    const isLoggedIn = this._spotify.isAuthenticated();
    if (!isLoggedIn) {
      return true;
    }
    return this.router.navigate(['/'])
  }

然后将其添加到您的路线中

{ path: '/login', component: LoginComponent, canActivate: [LoginGuard] }