如何实现 Auth Guard：Angular答案

【问题标题】：How to implement Auth Guard : Angular如何实现 Auth Guard：Angular
【发布时间】：2021-09-09 22:12:27
【问题描述】：

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

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

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

【问题讨论】：

你可以有多个守卫，一个用来阻止访客看到私人内容，另一个用来阻止登录用户进入登录页面，如果这对你的应用有意义的话。

标签： angular typescript angular-router-guards

【解决方案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] }

【讨论】：