Вкладка приложения на основе UserRole Директива Выпуск

Question

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

Имеется мой has-role.directive.ts файл:

import { Directive, Input, TemplateRef, ViewContainerRef, OnInit } from '@angular/core';
import { AuthService } from 'src/app/auth/auth.service';
import { Storage } from '@ionic/storage';

@Directive({
    selector: '[appHasRole]'
})
export class HasRoleDirective implements OnInit {
    @Input() appHasRole: Array<string>;
    isVisible = false;

    constructor(
        private authService: AuthService,
        private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef,
        private storage: Storage
    ) {}

    ngOnInit() {
        this.storage.get('ACCESS_TOKEN').then(token => {
            if (token) {
                this.authService.getUserRoles().subscribe((data: any) => {
                    if (!data.roles) {
                        this.viewContainer.clear();
                    }
                    if (data.roles.some(r => this.appHasRole.includes(r))) {
                        if (!this.isVisible) {
                            this.isVisible = true;
                            this.viewContainer.createEmbeddedView(this.templateRef);
                        } else {
                            this.isVisible = false;
                            this.viewContainer.clear();
                        }
                    }
                });
            }
        });
    }
}

И вкладки определяются следующим образом:

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="paper"></ion-icon>
      <ion-label>{{'TABS.tab_1' | translate}}</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="dictionary" (click)="goToDictionary()">
      <ion-icon name="book"></ion-icon>
      <ion-label>{{'TABS.tab_2' | translate}}</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="profile" (click)="goToProfile()">
      <ion-icon name="person"></ion-icon>
      <ion-label>{{'TABS.tab_3' | translate}}</ion-label>
    </ion-tab-button>

    <ion-tab-button *appHasRole="['moderator']" tab="admin" (click)="goToAdmin()">
      <ion-icon name="construct"></ion-icon>
      <ion-label>Moderator</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

У той же ошибки также есть кнопка FAB, но я смогу исправить ее, как только получу решение текущей проблемы директивы.

Вот мой AuthService:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { tap } from 'rxjs/operators';
import { Observable, BehaviorSubject } from 'rxjs';

import { Storage } from '@ionic/storage';
import { API_ENDPOINTS } from 'src/environments/environment';
import { Platform } from '@ionic/angular';

@Injectable({
    providedIn: 'root'
})
export class AuthService {
    public authenticationState = new BehaviorSubject(false);

    constructor(
        private httpClient: HttpClient,
        private storage: Storage,
        private platform: Platform
    ) {
        this.platform.ready().then(() => {
            this.checkAuthToken();
        });
    }

    private checkAuthToken() {
        this.storage.get('ACCESS_TOKEN').then(res => {
            if (res) {
                this.authenticationState.next(true);
            } else {
                this.storage.remove('ACCESS_TOKEN');
            }
        });
    }

    login(user): Observable<any> {
        return this.httpClient
            .post(`${API_ENDPOINTS.API_V1}auth/token/login/`, user)
            .pipe(
                tap(async res => {
                    if (res.auth_token) {
                        await this.storage.set('ACCESS_TOKEN', res.auth_token);
                        this.authenticationState.next(true);
                    }
                })
            );
    }

    getUserRoles() {
        return this.httpClient.get(`${API_ENDPOINTS.API_V1}get-user-roles/`);
    }

    getAuthorizationToken() {
        return this.storage.get('ACCESS_TOKEN');
    }

    logout() {
        this.storage.remove('ACCESS_TOKEN');
        this.authenticationState.next(false);
    }

    isLoggedIn() {
        return this.authenticationState.value;
    }
}

Существует компонент Popover страницы профиля. Здесь определена кнопка выхода из Popover:

import { Component } from '@angular/core';

import { PopoverController } from '@ionic/angular';
import { AuthService } from 'src/app/auth/auth.service';
import { Router } from '@angular/router';
import { Storage } from '@ionic/storage';

@Component({
    template: `
        <ion-list>
            <ion-item button href="https://m.chechen-dictionary.com/" target="_blank">
                <ion-icon slot="start" name="globe"></ion-icon>
                <ion-label>Chechen Dictionary</ion-label>
            </ion-item>
            <ion-item button (click)="openTutorial()">
                <ion-icon slot="start" name="help-circle-outline"></ion-icon>
                <ion-label>{{ 'PROFILE.tutorial' | translate }}</ion-label>
            </ion-item>
            <ion-item button (click)="logout()">
                <ion-icon slot="start" name="log-out"></ion-icon>
                <ion-label>{{ 'PROFILE.logout' | translate }}</ion-label>
            </ion-item>
        </ion-list>
    `
})
export class ProfileSettingsPage {
    constructor(
        public popoverCtrl: PopoverController,
        private authService: AuthService,
        private router: Router,
        private storage: Storage
    ) {}

    logout() {
        this.authService.logout();
        this.popoverCtrl.dismiss();
        this.router.navigateByUrl('/tabs/home');
    }
}

Answer 1

Выход из системы должен также перенаправить вас в другое представление и уничтожить все в сеансе. Для перенаправления вы можете импортировать роутер в ваш конструктор и вызвать его:

constructor(private router: Router){}


logout() {
    this.storage.remove('ACCESS_TOKEN');
    this.authenticationState.next(false);
    this.router.navigate(["some-page"]);
}