ナビゲーションリストを表示/非表示にする方法4

Question

MEANスタックでログイン認証を行っています。私はフロントエンドで角度4を使用しています。私はログインに基づいて表示/非表示のナビゲーションを実装しようとしています。ユーザーのログイン時には、ナビゲーションリストを表示する必要がありますが、表示されず、エラーも表示されませんが、ログイン前後にログインボタンが表示されます。ここで私のコードは誰でも私が間違っているところでこれを助けてくれます。バックエンドログイン認証では、passport.jsとexpress sessionを使用しました。私はJWTトークンを使用していません。

//navbar.component.html

<div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav"> 
       <ng-template *ngIf="isAuthenticated()"> <!-- Here I used [ngIf]="isAuthenticated()" as well still it doesn't work--> 
       <li><a routerLink="/jobs">Jobs</a></li> 
       <li><a routerLink="/users">Users</a></li> 
       <li ><a routerLink="/register">Register a User</a></li> 
       </ng-template> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <ng-template *ngIf="isAuthenticated()"> 
       <li><a (click)="onLogout()">Logout</a></li> 
      </ng-template> 
      <li *ngIf="!isAuthenticated()" routerLinkActive="active"><a routerLink="/login">Login</a></li> 
     </ul> 
</div> 

//navbar.component.ts

export class NavbarComponent implements OnInit { 
    constructor(private authService: AuthService, 
       private router: Router) { } 
    ngOnInit() { 
    } 
    onLogout() { 
    this.authService.logout() 
     .subscribe(
     (res) => { 
      if (res) { 
      this.router.navigate(['/login']); 
      } 
     } 
    ); 
    } 
    isAuthenticated() { 
    this.authService.isAuthenticated(); 
    } 
} 

//auth.service.ts

export class AuthService { 
    url = 'http://localhost:3000/api/users' 
    constructor(private router: Router, 
       private http: HttpClient) {} 
    signInWithEmailAndPassword (userDetails) { 
     return this.http.post(this.url + '/login', userDetails, { observe: 'body', responseType: 'json'}) 
      .map(
       (response) => { 
        return response; 
       } 
      ) 
    } 

    logout() { 
     return this.http.get(this.url + '/logout') 
      .map((response) => {return response}) 
    } 

    isAuthenticated() { 
     return this.http.get(this.url + '/is-logged-in') 
      .map((response) => { return response }) 
    } 
} 

**** ******* Node.jsバックエンドコード***********

//server.js

const userRoute = require('./routes/user-route'); 
app.use('/api/users', userRoute); 

//user.router.js

userRoute.get('/is-logged-in', authMiddleware.isUserLoggedIn, authMiddleware.isUserActive, user.isLoggedInUser) 

//authMiddleware.js

const authMiddleware = { 
isUserActive: (req, res, next) => { 
     req.user.isActive === true ? next() : res.status(401).send({message: 'No User Found!'}); 
    }, 
    isUserLoggedIn: (req, res, next) => { 
     console.log('imcalled from auth'); 
     req.isAuthenticated() ? next() : res.status(401).send({message: 'You must be LoggedIn'}); 
    } 
} 

//user.controller.js

const user = { 
    isLoggedInUser: (req, res) => { 
     res.status(200).send(true); 
    } 
}; 

Answer 1

asyncパイプを使用してみてください。https://angular.io/api/common/AsyncPipe。

The async pipe subscribes to an Observable or Promise and returns the latest value it has emitted. When a new value is emitted, the async pipe marks the component to be checked for changes. When the component gets destroyed, the async pipe unsubscribes automatically to avoid potential memory leaks.

あなたは変数にisAuthenticated()を割り当てることができますし、それにasyncを適用します。

_isAuthenticated: Observable<any> 
ngOnInit() { 
    this._isAuthenticated = this.isAuthenticated(); 
} 
isAuthenticated() { 
    return this.authService.isAuthenticated(); 
} 

そしてHTMLの*ngIf="_isAuthenticated | async"。 （returnをRRForUIとしてisAuthenticated（）に追加し、Chau Tranを認識させる）。

別の解決策は、（ベネディクト・シュミットが言ったように、角度は一度だけサーバーを呼び出し、ため、このソリューションは良いです）ブール変数を追加することで、観測可能に加入する：このソリューションで

_isAuthenticated: boolean; 
ngOnInit() { 
    this.authService.isAuthenticated().subscribe(res => { 
    this._isAuthenticated = res; 
    });  
} 

、機能isAuthenticated()はもう必要なく、HTMLではちょうど*ngIf="_isAuthenticated"を使用します。

最後に、response.json()をauth.service.tsに返します。

... 
.map((response) => { return response.json() })