ng-auth

authenticate.ts

@authenticate

html.ts

<li class="nav-item active" *ngIf="isLogged">
  <a class="nav-link" href="/" style="text-transform: uppercase;" (click)="logout()">Deslogar
      <span class="sr-only">(current)</span>
  </a>
</li>

jtw-interceptor.ts

@Injectable()
export class JwtInterceptor implements HttpInterceptor {

  constructor(
    private userService: UserService
  ) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // add auth header with jwt if user is logged in and request is to the api url
    const tokenObj = this.userService.tokenValue;
    const isLoggedIn = tokenObj && tokenObj.token;
    const isApiUrl = request.url.startsWith('http:://localhost:3000');
    if (isLoggedIn && isApiUrl) {
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${tokenObj.token}`
        }
      });
    }
    return next.handle(request);
  }
}

login.ts

login(email: string, password: string) {
  return this.http.post<UserToken>(`http://localhost:3000/users/login`, {email, password})
  .pipe(
    map(token => {
      const userToken: UserToken = token;

      localStorage.setItem('user-token', JSON.stringify(userToken));
      this.tokenSubject.next(userToken);

      return userToken;
    })
  );
}

logout.ts

logout() {
  localStorage.removeItem('user-token');
  this.tokenSubject.next(null);
  this.router.navigate(['/']);
}

nab-bar.component.ts

@Component({
  selector: 'app-nav-bar',
  templateUrl: './nav-bar.component.html',
  styleUrls: ['./nav-bar.component.scss']
})
export class NavBarComponent implements OnInit {
  public isLogged: boolean;
  
  constructor(
    private userService: UserService
  ) {
    this.isLogged = this.userService.tokenValue ? true : false;
  }

  ngOnInit(): void {
  }

  logout() {
    this.userService.logout();
  }
}

onSubmit.ts

onSubmit() {
  this.submitted = true;

  // stop here if form is invalid
  if (this.form.invalid) {
    return;
  }

  this.loading = true;
  this.userService.login(this.f.email.value, this.f.password.value)
    .pipe(first())
    .subscribe(
      data => {
        this.router.navigate([this.returnUrl]);
      },
      error => {
        this.loading = false;
      });
}

tokenValue.ts

public get tokenValue(): UserToken {
  return this.tokenSubject.value;
}

user-token.ts

export class UserToken {
  token: string;
}

user.service.ts

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private tokenSubject: BehaviorSubject<UserToken>;
  public token: Observable<UserToken>;
  constructor(
    private router: Router,
    private http: HttpClient
  ) {
    this.tokenSubject = new BehaviorSubject<UserToken>(JSON.parse(localStorage.getItem('user-token')));
    this.token = this.tokenSubject.asObservable();
   }
}