Метод isTokenExpired возвращает true и false - PullRequest
Новая
       47

Метод isTokenExpired возвращает true и false

0 голосов
/ 30 мая 2018

Я довольно новичок в angular, и я пытаюсь проверить свой токен аутентификации, используя angular-jwt на Angular 6. Цель проверки токена состоит в том, чтобы разрешить разные кнопки, когда пользователь регистрируется и показывает другой наборкнопок, когда они выходят из системы.

Это мой authService. 

import { JwtHelperService } from '@auth0/angular-jwt';

constructor(private http:HttpClient, public jwtHelper:JwtHelperService)
{}

loggedIn()
{
  console.log(this.jwtHelper.isTokenExpired(this.authtoken));
}

И это немного моего HTML-кода 

<a *ngIf="!authService.loggedIn()" [routerLink]="['/login']"><button class.....
<a *ngIf="!authService.loggedIn()" [routerLink]="['/register']"><button class.....   
<a *ngIf="authService.loggedIn()" [routerLink]="['/profile']"><button class....
<a *ngIf="authService.loggedIn()" [routerLink]="['/profile']"><button class.....

Теперь моя проблема до того, как явойти в систему, она правильно входит в консоль как true, но после того, как я войду в систему и зайду на страницу профиля, кнопки не изменятся, потому что она все еще записывает true и затем снова записывает false.

Перед входом в систему: Before Logging in

После входа в систему: After logging in

Я думаю, это связано с использованием функции получения токена в модуле приложения, но я неуверен, как еще это реализовать.

Мой компонент модуля приложения: 

....
imports: [BrowserModule,
[JwtModule.forRoot({
config: {tokenGetter:tokenGetter,whitelistedDomains['localhost:3000']}
})]

providers: [AuthService,JwtHelperService]
})

export function tokenGetter() {
return localStorage.getItem('access_token');
}

1 Ответ

0 голосов
/ 11 июня 2019

Лучше поздно, чем никогда, я только что столкнулся с этим вопросом.Это отличная статья о том, как реализовать пользовательские директивы в angular.

Отображение компонента на основе роли

чрезвычайно полезно.Глядя на описание, это, на мой взгляд, то, что следует использовать 

@Directive({
  selector: '[appHasRole]'
})
export class HasRoleDirective implements OnInit, OnDestroy {
  // the role the user must have 
  @Input() appHasRole: string;

  stop$ = new Subject();

  isVisible = false;

  /**
   * @param {ViewContainerRef} viewContainerRef 
   *    -- the location where we need to render the templateRef
   * @param {TemplateRef<any>} templateRef 
   *   -- the templateRef to be potentially rendered
   * @param {RolesService} rolesService 
   *   -- will give us access to the roles a user has
   */
  constructor(
    private viewContainerRef: ViewContainerRef,
    private templateRef: TemplateRef<any>,
    private rolesService: RolesService
  ) {}

  ngOnInit() {
    //  We subscribe to the roles$ to know the roles the user has
    this.rolesService.roles$.pipe(
        takeUntil(this.stop$)
    ).subscribe(roles => {
      // If he doesn't have any roles, we clear the viewContainerRef
      if (!roles) {
        this.viewContainerRef.clear();
      }
      // If the user has the role needed to 
      // render this component we can add it
      if (roles.includes(this.appHasRole)) {
        // If it is already visible (which can happen if
        // his roles changed) we do not need to add it a second time
        if (!this.isVisible) {
          // We update the `isVisible` property and add the 
          // templateRef to the view using the 
          // 'createEmbeddedView' method of the viewContainerRef
          this.isVisible = true;
          this.viewContainerRef.createEmbeddedView(this.templateRef);
        }
      } else {
        // If the user does not have the role, 
        // we update the `isVisible` property and clear
        // the contents of the viewContainerRef
        this.isVisible = false;
        this.viewContainerRef.clear();
      }
    });
  }

  // Clear the subscription on destroy
  ngOnDestroy() {
    this.stop$.next();
  }
}

, и теперь мы можем использовать директивы, такие как 

<app-normal-users-can-view *appHasRole="'user'">
</app-normal-users-can-view>
...