Как получить маршрутную охрану для проверки токена после того, как я установил его в локальном хранилище? - PullRequest
Новая
       17

Как получить маршрутную охрану для проверки токена после того, как я установил его в локальном хранилище?

0 голосов
/ 20 марта 2019

Я создаю простую страницу входа с аутентификацией, используя Angular и Express.У меня есть следующее:

  • компонент входа
  • служба, которая выполняет http-вызовы и устанавливает локальное хранилище с полученным токеном jwt
  • защитой маршрута для регистрациистраница

Моя охрана работает в том, что она запрещает доступ к маршруту '/ registration', если токена нет.Поскольку в самом первом входе в систему отсутствует токен, и, кажется, охранник проверяет его перед установкой токена при вызове onSubmit () компонента входа в систему, мне приходится дважды вызывать onSubmit () - один раз, чтобы получить ключ, а затем другой, чтобыавторизоваться.Я хотел бы иметь возможность войти сразу после ввода правильных учетных данных.

Как мне решить эту проблему?Заранее спасибо!

login-component.ts 

...
this.loginForm = this.fb.group({
    username: ['', Validators.required],
    password: ['', Validators.required]
})
...
onSubmit() {
    const formValue = this.loginForm.value;
    if (formValue.username && formValue.password) {
      this.authService.login(formValue.username, formValue.password)
        .subscribe(
          resp => { console.log(resp); },
          err => { console.log(err); }
        )
      this.router.navigateByUrl('/registration');
    }
  }

auth-service.service.ts: 

export class AuthSerivce {

constructor(private http: HttpClient) {}

login(username: string, password: string) {
const body = {
  username: username,
  password: password
}
return this.http.post<AuthResp>(ROUTES.login, body)
  .pipe(
    tap(res => this.setSession(res)),
    catchError(this.handleError),
    shareReplay()
  )
}

...

private setSession(authResp: AuthResp) {
    const expiresAt = moment().add(authResp.expiresIn, 'second');

    localStorage.setItem('id_token', authResp.token);
    localStorage.setItem("expires_at", JSON.stringify(expiresAt.valueOf()));
}


public isLoggedIn() {
    return moment().isBefore(this.getExpiration());
}

public getExpiration() {
    const expiration = localStorage.getItem("expires_at");
    const expiresAt = JSON.parse(expiration);
    return moment(expiresAt); 
}
}

auth.guard.ts 

export class AuthGuard implements CanActivate {
    constructor(
        private _authService: AuthService,
        private _router: Router) { }


canActivate(): boolean {
    if (this._authService.isLoggedIn()) {
        return true;
    } else {
        this._router.navigate(['login']);
        return false;
    }
  }
}

1 Ответ

0 голосов
/ 20 марта 2019

Решена проблема.Мне нужно было разместить свою навигацию в подписке на мой вход в систему:

login-component.ts 

...
this.loginForm = this.fb.group({
    username: ['', Validators.required],
    password: ['', Validators.required]
})
...
onSubmit() {
    const formValue = this.loginForm.value;
    if (formValue.username && formValue.password) {
      this.authService.login(formValue.username, formValue.password)
        .subscribe(
          resp => { 
              console.log(resp);
              this.router.navigateByUrl('/registration'); 
          },
          err => { console.log(err); }
        )
    }
  }
...