Angular 8 Поведение субъекта - PullRequest
Новая
       55

Angular 8 Поведение субъекта

0 голосов
/ 21 апреля 2020

Я создаю часть аутентификации для своего сайта. Я использую тему поведения из rx js для хранения текущего пользователя. Я подписываюсь на эту тему поведения и использую это наблюдаемое, чтобы получить значение имени пользователя для отображения на моей панели навигации. Все почти работает, и когда я переключаю пользователей, он корректно обновляется в навигационной панели. Тем не менее, когда я вызываю функцию выхода из моего компонента (который затем выдает null для представления отсутствия пользователя), то каким-то образом он не удаляет имя из панели навигации. Я удостоверился, что у меня есть только один экземпляр моей услуги, предоставленной в root. Я знаю, что моя функция выхода из системы достигается, потому что я оставил хлебные крошки. Это моя функция выхода из системы. 

logOut() {
this.user.next(null);
this.authToken = null;

console.log("logout executed");

localStorage.clear();
localStorage.removeItem("userData");

}

Это мой компонент службы 

import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { map, tap } from "rxjs/operators";
import { BehaviorSubject } from "rxjs";
import { User } from "../components/login/user.model";
import { Userr } from "../components/login/model.userr";

export interface RegisterResponse {
  success: boolean;
  msg: string;
  token?: string;
  user?: Userr;
}
@Injectable({
  providedIn: "root",
})
export class AuthserviceService {
  user = new BehaviorSubject<User>(null);
  //...more code...

Вот мой код выхода для компонента navbar. 

import { Component, OnInit, ElementRef, OnDestroy } from "@angular/core";

import { AuthserviceService } from "src/app/services/authservice.service";
import { Router } from "@angular/router";
import { FlashMessagesService } from "angular2-flash-messages";
import {  Subscription } from "rxjs";

@Component({
  selector: "app-navbar",
  templateUrl: "./navbar.component.html",
  styleUrls: ["./navbar.component.css"],
  host: {
    "(document:click)": "onClick($event)",
  },
})
export class NavbarComponent implements OnInit, OnDestroy {
  userSub: Subscription;
  isOpen = false;
  isAuthenticated = false;
  navOpen = false;
  user: string;

  constructor(
    private _eref: ElementRef,
    private authService: AuthserviceService,
    private router: Router,
    private flashMessage: FlashMessagesService
  ) {}

  ngOnInit() {
    this.userSub = this.authService.user.subscribe((user) => {
      if (!user) {
        return;
      }
      console.log(user);
      this.isAuthenticated = !!user;
      this.user = user.username;
    });
  }

  onClick(event) {
    if (!this._eref.nativeElement.contains(event.target))
      // or some similar check
      this.isOpen = false;
  }

  toggleDropdown() {
    this.isOpen = !this.isOpen;
  }
  toggleBurg() {
    this.navOpen = !this.navOpen;
  }

  onLogOut() {
    this.authService.logOut()
    this.flashMessage.show("You are Logged Out!", {
      cssClass: "alert-success",
     timeout: 3000,
    });

    this.router.navigate(["login"]);
  }

  ngOnDestroy() {
    this.userSub.unsubscribe();
  }
}

Ответы [ 2 ]

0 голосов
/ 21 апреля 2020

Когда вы говорите, что не работает, я думаю, вы имеете в виду, что это должно удалить имя из навигационной панели. Я думаю, что проблема в 

 if (!user) {
    return;
 }

Вы должны изменить это на 

if (!user) {
   this.user = ''; 
   return;
 }

Надеюсь, это поможет

0 голосов
/ 21 апреля 2020

В вашей подписке userSub у вас есть код: 

if (!user) {
    return;
}

В результате код никогда не достигает приведенного ниже кода, что выглядит довольно актуально.

Если случайно это не решит вашу проблему, это может быть проблема changeDetection.

...