如果已登录用户，则隐藏 Angular 中的 div

Question

I try to hide a div when the user is logged in, using auth service in Angular and token from Django

Component.html

<a *ngIf="authService.isLogedin()" style="color:white"   href="/#/login" class="nav-link" (click)="logOut()">Cerrar sesión</a>

auth service.ts

islogedin: boolean = false;

private setSession(authResult) {
  const token = authResult.token;
  const payload = <JWTPayload> jwtDecode(token);
  const expiresAt = moment.unix(payload.exp);

  localStorage.setItem('token', authResult.token);
  localStorage.setItem('expires_at', JSON.stringify(expiresAt.valueOf()));
}

isLogedin() {

    if (JSON.parse(localStorage.getItem('token')).auth_token == null) {
      this.islogedin = false;
      return this.islogedin;
    }
    else {
      return true;
    }
  }

Answer 1

You can't call the service directly into the html component

You have to make the service injection in the constructor and use that it in

In component.ts

islogedin: boolean;

constructor (private authService:AuthService)
{islogedin= authService.isLogedin();

}

Then in html component use like this

component.html

         <a *ngIf="islogedin" style="color:white"   href="/#/login" class="nav-link" (click)="logOut()">Cerrar sesión</a>

Answer 2

Try next, to prevent errors in JSON.parse.

isLogedin() {
   const token = localStorage.getItem('token');
   this.islogedin = token && JSON.parse(token) != null;
   return this.islogedin;
}