Angular 5：隐藏元素（如果用户未通过身份验证）不起作用

Question

这是app.component.html

<nav class='navbar navbar-default'>
<div class='container-fluid'>
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" routerLink="" ></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
  <ul class='nav navbar-nav navbar-left'>
    <li><a *ngIf="loggedin" routerLink="/posts">Posts</a></li>
    <li><a routerLink="/profile">Profile</a></li>
    <li><a *ngIf="loggedin" routerLink="/settings">Settings</a></li>
    <li><a routerLink="/register">Register</a></li>
    <li><a routerLink="/login">Login</a></li>
    <li><a routerLink="/administration">Administration</a></li>
  </ul>
</div>
</div>
</nav>

<router-outlet></router-outlet>

authentication.service.ts

import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {User} from "../../interfaces/user.interface";

@Injectable()
export class AuthenticationService {
logging: boolean = false;

constructor(private http: HttpClient) { }

isloggedin() {
this.http.get('/loggedin')
  .toPromise()
  .then((data: any) => {
    console.log('data', data);
    if (data) {
      return true;
    } else {
      return false;
    }

  });
 }

}

app.component.ts

import {Component, OnInit} from '@angular/core';
import {AuthenticationService} from 
"../../services/authentication/authentication.service";
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs/Observable";

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
 })
export class AppComponent implements OnInit{
title = 'twittscheR';
loggedin: any;

constructor(private http: HttpClient) {
 this.loggedin = AuthenticationService.isloggedin();
}
ngOnInit(){
 this.loggedin = this.isloggedin();
}
isloggedin() {
 return this.http.get('/loggedin');
}
}

我真的是新手 Angular 5. 如果 loggedin 为 true，我如何实现导航栏中的某些元素仅可见？甚至重新加载页面。登录功能正常，但 ngIf 不更新导航栏中的变量

谢谢

Answer 1

在您的 authentication.service.ts 中创建类型 BehaviorSubject<boolean> 的变量 loggedin:

loggedin: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(null);

现在修改您的 isLoggedIn() 函数，如果您获得数据，则将 loggedin 设置为 true，如果没有数据，则将其设置为 false；

isloggedin() {
this.http.get('/loggedin')
  .toPromise()
  .then((data: any) => {
    console.log('data', data);
    if (data) {
      // login success
      this.loggedid.next(true);
    } else {
      // login fails
      this.loggedid.next(false);
    }

  });
 }

现在您可以在您的组件中订阅 loggedin varibale。为此，你应该在 app.component.ts.

中注入你的 authentication.service

loggedin: boolean;

constructor(private http: HttpClient, private authService: AuthenticationService) {
 this.authService.loggedin.subscribe(v => this.loggedin = v);
}

现在您可以在 app.component.html 中使用 app.component.ts 中的 loggedin 变量。

注意：要使此解决方案起作用，您应该运行您的 isLoggedIn() 功能，例如通过点击登录按钮。

如果您需要更多解释，请告诉我，我会写更大的教程。

Angular 5：隐藏元素（如果用户未通过身份验证）不起作用

Angular 5: Hiding elements (if user isn't authenticated) not working

angular

express

passport.js

angular5

passport-local