Angular 7中的路由和授权

Question

我尝试在Angular 7中通过路由实现标准JWT授权。我的app-routing.module.ts部分：

{
    path: '',
    component: MainComponent,
    canActivate: [AuthGuard]
      },
  {
    path: '401',
    component: UnauthorizeComponent
  }

我也有auth.service.ts：

const helper = new JwtHelperService();
const myRawToken = localStorage.getItem('token');
const isExpired = helper.isTokenExpired(myRawToken);

@Injectable()
export class AuthService {

...

  public isAuthenticated(): boolean {
    return !isExpired;

@Injectable()
export class AuthGuardService  implements CanActivate {

...

  canActivate(): boolean {
    if (!this.auth.isAuthenticated()) {
      this.router.navigate(['401']);
      return false;
    }
    return true;
  }
}

在Heade组件中，我有带有“login”项的下拉列表，我的代码有：

sendLogin() {

    const body = new HttpParams()
      .set('username', this.loginForm.value.login)
      .set('password', this.loginForm.value.password);

    this.authService.login(body.toString())
      .pipe(
        catchError(err => {
          return ......;
        }))
      .pipe(
        tap(resp => {
          localStorage.setItem('token', resp.headers.get('Authorization'));
          this.router.navigate(['']);
        }))
      .subscribe();
  }

我做错了什么？

如何刷新令牌？

Answer 1

如果您的令牌位于本地存储中，则任何服务都会在初始化时从那里获取它。因此，在授权期间，您将令牌放在localStorage中，但guard引用的授权服务在其变量中保留了一个变量，该变量还没有来自localStorage的令牌。因此，使用F5，您启动了一个服务，而它已经看到了它。有必要扩展授权服务，以便在得到答案后，立即将令牌变量中的数据