Не удается проверить достоверность JWT в AuthGuard в angular 6?

Question

Я создал угловое приложение с простой страницей входа и приборной панелью.Панель инструментов является защищенной страницей и должна открываться после действительного входа в систему.

На кнопке отправки я вызываю службу проверки подлинности, чтобы проверить действительность учетных данных пользователя, а в ответ я получаю JWT, который хранится влокальное хранилище.

Я также создал AuthGuard для защиты приборной панели.В AuthGuard я не могу определить, является ли этот JWT действительным или нет (любой пользователь может создать некоторый случайный ключ и получить доступ к панели инструментов).

Нужно ли создавать какой-либо метод в панели инструментовМетод 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?Пожалуйста, предложите.

обычно пользователи не будут добавлять элементы локального хранилища вручную, поэтому вы можете проверить только, если токен существует.

Кроме того, я использую angular jwt, который является пакетом от Auth0.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']);
}