[英]How to show navbar only when user is logged on angular 6
I am having problem checkin if user is logged. 如果用户已登录,我在签入时遇到问题。 The navbar behavior right now is that it hides since It can't get the user data after a few minutes. 导航栏现在的行为是隐藏,因为几分钟后无法获取用户数据。 The first time works perfectly but after a few minutes dissapear. 第一次运行完美,但几分钟后消失。 Maybe I'm implemeting wrong the observable. 也许我实现了可观察到的错误。 Can anyone give me a hand? 有人可以帮我吗? thank you! 谢谢!
navbar.component.ts navbar.component.ts
export class NavbarComponent implements OnInit {
loggedUser: Object = {}
isLogged: boolean = false
imageUrl: string = ''
constructor(private router: RouterModule, private route: Router, private authService: AuthService) {
}
ngOnInit() {
this.imageUrl = env.amazon_images_s3
const user = AuthService.getUser()
if(user) {
this.authService.userLoggedIn$.subscribe(data => {
this.isLogged = true
this.loggedUser = data
})
}
}
auth.service 认证服务
export class AuthService {
private static CURRENT_USER = 'currentUser'
private userLoggedIn = new Subject<any>()
private userLoggedOut = new Subject<any>()
userLoggedIn$ = this.userLoggedIn.asObservable()
userLoggedOut$ = this.userLoggedOut.asObservable()
constructor(private _apiService: ApiService) { }
public isAuthenticated(): any {
const user = JSON.parse(localStorage.getItem(AuthService.CURRENT_USER))
if (user) {
return user.token.access_token !== null;
}
return false
}
logIn(username: string, password: string) {
return this._apiService.post('user/login', { username: username, password: password, auth_type: 'ADMIN' })
.pipe(map((data) => {
if (data.token_info) {
localStorage.setItem(AuthService.CURRENT_USER, JSON.stringify({ "token": data.token_info, "user": data.user }));
this.userLoggedIn.next(data.user)
}
return data;
}))
}
navbar.html navbar.html
<mat-toolbar class="nav-bar" *ngIf="isLogged">
<div class="navbar-menu" *ngIf="route.url === '/map'">
<i class="material-icons">
menu
</i>
</div>
<div class="logo" [routerLink]="['map']">
<img class="mobile" src="assets/images/logo-mobile.png" alt="">
<img class="desktop" src="assets/images/nav-logo.png" alt="">
</div>
<div class="links" *ngIf="route.url == '/map'">
<div class="link" [routerLink]="['dashboard']">
<app-svg-icon [goToPath]="'assets/images/administrator.svg'"></app-svg-icon>
<span>Administrador</span>
</div>
<div class="link" [routerLink]="['reports']">
<app-svg-icon [goToPath]="'assets/images/reports.svg'"></app-svg-icon>
<span>Reportes</span>
</div>
<div class="link" [routerLink]="['map/offline']">
<app-svg-icon [goToPath]="'assets/images/offline.svg'"></app-svg-icon>
<span>Mapa Offline</span>
</div>
</div>
<div class="nav-bar-dropdown" [class.active]="active" (click)="active = !active">
<div class="name">
{{loggedUser.first_name}}
<i class="material-icons">
keyboard_arrow_down
</i>
</div>
<div class="dropdown">
<div class="dropdown-avatar">
<img src="{{loggedUser.avatar ? imageUrl + loggedUser.avatar : null}}" alt="">
</div>
<div class="dropdown-text">
<div class="name">{{loggedUser.first_name}} {{loggedUser.last_name}}</div>
<div class="id">ID {{loggedUser.id}}</div>
<div class="rol">{{'users.' + loggedUser.groups.name | translate }}</div>
</div>
<div class="logout" (click)="onLogOut()">{{ 'navbar.logout' | translate }}</div>
</div>
</div>
<div class="setting" *ngIf="route.url == '/map'">
<app-svg-icon [goToPath]="'assets/images/settings.svg'" [routerLink]="['map/settings']"></app-svg-icon>
</div>
我想问题不在于可观察的,因为您最初获得的是结果,而是路线,请尝试使用'==='
<div class="navbar-menu" *ngIf="route.url === '/map'">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.