Question

如果登录了用户，我在签入问题。导航栏现在的行为是隐藏，因为几分钟后无法获取用户数据。第一次运行完美，但几分钟后消失。也许我实现了可观察到的错误。有人可以帮我吗？谢谢！

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
      })
    }
  }

身份验证服务

 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

<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>

Answer 1

我想问题不在于可观察到的，因为最初得到的是结果，而是路线，请尝试 '==='

 <div class="navbar-menu" *ngIf="route.url === '/map'">

仅当用户登录角度6时如何显示导航栏

1 个答案: