Question

我用简单的登录页面和仪表板创建了一个有角度的应用程序。仪表板是一个安全页面，应在有效登录后打开。

在“提交”按钮上，我正在调用身份验证服务以检查用户凭据的有效性，并在响应中收到一个JWT，该JWT存储在本地存储中。

我还创建了一个AuthGuard来保护仪表板。在AuthGuard中，我无法确定此JWT是否有效（任何用户都可以创建一些随机密钥并访问仪表板）。

我是否必须在Dashboard Init（）方法中创建一些方法来检查JWT的有效性，如果是，那么AuthGuard的目的是什么？请提出建议。

login.component.ts：

this.authenticationService.login(this.f.userName.value, this.f.password.value)
      .pipe(first())
      .subscribe(
        data => {
          this.router.navigate(['/dashboard']);
        },
        error => {
          // this.error = error;
          // this.loading = false;
        });

authenticationservice.ts

login(username: string, password: string) {
        return this.http.post<any>('http://localhost:59900/api/login', { username, password })
            .pipe(map(user => {
                // login successful if there's a jwt token in the response&& user.token
                debugger;
                if (user ) {
                    // store user details and jwt token in local storage to keep user logged in between page refreshes
                    localStorage.setItem('currentUser', JSON.stringify(user));
                }
                return user;
            }));
    }

AuthGuard：

export class AuthGuard implements CanActivate {

    constructor(private router: Router) { }

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
        debugger;
        if (localStorage.getItem('currentUser')) {
            // logged in so return true
            return true;
        }

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

Answer 1

将令牌存储在localStorage中时，您应该意识到用户可以更改它并设置自己的令牌的风险。但是据我所知，您有一些后端服务正在检查访问或刷新令牌的有效性。因此，如果您需要使用Guard验证用户令牌，则可以从Guard向后端发送一些请求，并且如果用户通过了身份验证（意味着令牌有效），则返回true。无论如何，如果您要通过授权从后端返回一些信息，则任何用户都需要具有有效的令牌。您将从警卫队还是仅从页面上执行。例如，我更喜欢在警戒之外检查支票令牌的有效性。在控制器初始化（OnInit）上。

请记住，未经授权，不得从后端保存或加载应用程序保护的数据。

那又如何：我是否必须在Dashboard Init（）方法中创建一些方法来检查JWT的有效性，如果是，那么AuthGuard的目的是什么？请提出建议。

通常用户不会手动添加本地存储项目，因此您只能检查令牌是否存在。

此外，我正在使用来自Auth0的angular jwt。 https://github.com/auth0/angular-jwt 使用包，我正在检查令牌是否过期。查看我的代码：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot)  {  
  const refToken = refreshTokenGetter();
  const helper = new JwtHelperService();
  const isExpired = helper.isTokenExpired(refToken);

  if (refToken && !isExpired) {
      return true;
  }

  this.router.navigate(['auth']);
}

无法在角度6中的AuthGuard中检查JWT有效性？

1 个答案: