在我的 app.component.html 中，我有我的导航栏和路由器插座。我想从登录页面隐藏导航栏并在登录后显示它。我使用 angular-2/jwt 助手来检查本地存储中是否有可用的令牌，并根据返回值从登录页面隐藏导航栏。但登录后导航栏没有显示请帮助我。提前谢谢
app.component.ts
================
ngOnInit() {
this.authservice.userLoggedIn()
}
login-service.ts
================
import { Http, Headers } from '@angular/http';
import { Injectable } from '@angular/core';
import {JwtHelper, tokenNotExpired } from 'angular2-jwt'
import 'rxjs/add/operator/map';
@Injectable()
export class LoginService {
authToken: any[];
user: any[];
constructor(private http: Http) { }
authenticateUser(user) {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.post('http://localhost:8080/users/authenticate',user,{headers:headers})
.map(res=>res.json());
}
storeUserData(token,user){
localStorage.setItem('id_token',token);
localStorage.setItem('user',JSON.stringify(user));
this.authToken=token;
this.user=user;
}
userLoggedIn(){
return tokenNotExpired();
}
}
login.ts
========
onSubmit(form:NgForm){
const user=
{
username:form.value.username,
password:form.value.password
}
this.authservice.authenticateUser(user).subscribe(data=>{
if(data.success){
this.invalidlogin=false;
this.authservice.storeUserData(data.token,data.user)
this.authservice.userLoggedIn();
this.router.navigate(['dashboards/dashboard',data.token])
}
else{
this.invalidlogin=true;
// this.router.navigate(['/']);
}
})
}app.component.html
==================
<div class="bg-dark" *ngIf=" authservice.userLoggedIn()&& (layout == 'empty-view-1')"></div>
<sample-modals *ngIf=" authservice.userLoggedIn()&& (controller == 'notifications' && view == 'modals') "></sample-modals>
<right-sidebar-1 *ngIf=" authservice.userLoggedIn()&& (layout == 'default-sidebar-1' || layout == 'collapsed-sidebar-1' || layout == 'off-canvas-1' || layout == 'sidebar-over-1' || layout == 'top-navigation-1' || layout == 'top-navigation-2')"></right-sidebar-1>
<navbar-1 *ngIf=" authservice.userLoggedIn()&& (layout == 'default-sidebar-1' || layout == 'collapsed-sidebar-1' || layout == 'off-canvas-1' || layout == 'sidebar-over-1' || layout == 'top-navigation-1' || layout == 'top-navigation-2')"></navbar-1>
<top-navigation-1 *ngIf=" authservice.userLoggedIn()&& (layout == 'top-navigation-1')"></top-navigation-1>
<jumbotron-2 *ngIf=" authservice.userLoggedIn()&& (layout == 'top-navigation-2')"></jumbotron-2>
<top-navigation-2 *ngIf=" authservice.userLoggedIn()&& (layout == 'top-navigation-2')"></top-navigation-2>
<div class="container-fluid">
<div class="row">
<div class="left-sidebar-placeholder" *ngIf="authservice.userLoggedIn()&& (layout == 'default-sidebar-1' || layout == 'collapsed-sidebar-1' || layout == 'off-canvas-1' || layout == 'sidebar-over-1' || layout == 'top-navigation-1' || layout == 'top-navigation-2')"></div>
<left-sidebar-1 *ngIf=" authservice.userLoggedIn()&& ( layout == 'default-sidebar-1' || layout == 'collapsed-sidebar-1' || layout == 'off-canvas-1' || layout == 'sidebar-over-1' || layout == 'top-navigation-1' || layout == 'top-navigation-2')"></left-sidebar-1>
<div class="col main">
<jumbotron-1 *ngIf=" authservice.userLoggedIn()&& ( controller != 'dashboards' && (layout == 'default-sidebar-1' || layout == 'collapsed-sidebar-1' || layout == 'off-canvas-1' || layout == 'sidebar-over-1' || layout == 'top-navigation-1'))"></jumbotron-1>
<div class="page">
<router-outlet></router-outlet>
</div>
</div>
</div>
</div>
<backdrops></backdrops>我为这种情况所做的（对我来说看起来更容易）是这种结构
AppComponent
LoginComponent
Guarded/
MainView/
MainViewComponent
RandomComponent
/connected，受到保护通过这种方式，您可以清楚地分离已记录/未记录的组件，并且您不必使用条件来显示/隐藏页面中的某些组件。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句