Angular您如何知道身份验证状态何时更改

Question

im当前在使用登录的WebApp上工作。但是我对注销按钮有问题。注销按钮仅在您注销时登录并消失时才显示。

多数民众赞成在我的按钮（菜单-Items.component）：

<ul class="list-group">
  <li *ngIf="isLoggedIn" (click)="onLogout()">Logout</li>
</ul>

代码（菜单-Items.component）：

import { Component, OnInit } from '@angular/core';
import { HttpService } from '../../http.service';
import { Subscription } from 'rxjs';
@Component({
  selector: 'app-menu-items',
  templateUrl: './menu-items.component.html',
  styleUrls: ['./menu-items.component.css']
})
export class MenuItemsComponent implements OnInit {
  isLoggedIn: boolean = false;
  constructor(private httpService: HttpService) {
  }
  ngOnInit() {
  }
  onSignout(){
    this.isLoggedIn = false;
    localStorage.removeItem('currentUser');
  }
}

基本上，当我登录时，我希望" isloggedin"为" true"。

登录部分（login.component）：

 onSignin(){
    const username = this.loginForm.get('username').value;
    const password = this.loginForm.get('password').value;
    this.httpServie.sendDataLogin("grant_type=password&username=" + username + "&password=" + password)
      .subscribe(
        data => {
         this.token = JSON.parse(data["_body"]).access_token
         this.username = JSON.parse(data["_body"]).userName
         localStorage.setItem('currentUser', JSON.stringify({username: this.username, token: this.token}))
        },
        err => {
          if (err.error instanceof Error) {
            this.ServerErrorMsg = err.error.message;
          } else {
            const returnArray = [];
            this.ServerErrorMsg = JSON.parse(err._body).error_description + "n";
          }
        }
      );
  }

登录部分正在工作！我将数据发送到我的API，作为回报，我得到了我的令牌。

但是，我如何告诉我现在登录的Isloggedin布尔值？我认为我需要一个可观察的东西或用订阅来听的东西，对吗？我是Angular的新手，我真的不理解可观察到的东西。谁能帮我？

Answer 1

我相信您忘了成功登录后更新ISLoggedin变量。

尝试这个

subscribe(
    data => {
     this.token = JSON.parse(data["_body"]).access_token
     this.username = JSON.parse(data["_body"]).userName
     localStorage.setItem('currentUser', JSON.stringify({username: this.username, token: this.token}))
this.isLoggedIn=true;
}

Answer 2

我对您的建议是在您的服务（更好）或组件中（不要这样）一种getter方法，例如：

私人_islogged：boolean = false;

isLoggedIn(){
 var local= localStorage.getItem('currentUser');
var token= JSON.Parse(local) as any;
return local && token && token.access_token;
}
onSignin(){
    const username = this.loginForm.get('username').value;
    const password = this.loginForm.get('password').value;
    this.httpServie.sendDataLogin("grant_type=password&username=" + username + "&password=" + password)
      .subscribe(
        data => {
         this.token = JSON.parse(data["_body"]).access_token
         this.username = JSON.parse(data["_body"]).userName
         localStorage.setItem('currentUser', JSON.stringify({username: this.username, token: this.token}));

this._islogged = true;//＆lt; - sei t true

        },
        err => {
          if (err.error instanceof Error) {
            this.ServerErrorMsg = err.error.message;
          } else {
            const returnArray = [];
            this.ServerErrorMsg = JSON.parse(err._body).error_description + "n";
          }
        }
      );
  }

然后在您的代码中：

<ul class="list-group">
  <li *ngIf="isLoggedIn()" (click)="onLogout()">Logout</li>
</ul>

希望它能帮助您！