Bonjour à tous,

je suis en train de mettre en place JWT Token sur un projet angular et je retrouve avec les erreurs suivante:

Error: src/app/shared/services/auth.service.ts:103:7 - error TS2322: Type 'null' is not assignable to type 'Token'.

src/app/shared/interfaces/jwt-token.interface.ts:6:3
   
 The expected type comes from property 'token' which is declared here on type 'JwtToken'

j'ai donc deux interfaces

import { Token } from "./token.interface";
import { User } from "./user.interface";

export interface JwtToken {
  isAuthenticated: boolean;
  token: Token;
  user?: User;
}

et

export interface Token {
    token: string;
    refresh_token: string;
}

et mon service auth

import { Injectable } from "@angular/core";
import { User } from '../interfaces/user.interface';
import { Observable, BehaviorSubject, timer, of, Subscription } from "rxjs";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { JwtToken } from "../interfaces/jwt-token.interface";
import { tap, switchMap } from "rxjs/operators";
import { Router } from "@angular/router";

@Injectable()
export class AuthService {
  public subscription: Subscription;

  public jwtToken: BehaviorSubject<JwtToken> = new BehaviorSubject<JwtToken>({
    isAuthenticated: false,
    token: null,
  });

  constructor(private http: HttpClient, private router: Router) {
    this.initToken();
    this.subscription = this.initTimer();


  }

  
  public initTimer() {
    return timer(2000, 5000)
      .pipe(
        switchMap(() => {
          if (localStorage.getItem("jwt")) {
            return this.http.get<string>("/api/token/refresh").pipe(
              tap((token: string) => {
                this.jwtToken.next({
                  isAuthenticated: true,
                  token: token,
                });
                localStorage.setItem("jwt", token);
              })
            );
          } else {
            console.log("no token to refresh");
            this.subscription.unsubscribe();
            return of(null);
          }
        })
      )
      .subscribe(
        () => {},
        (err) => {
          this.jwtToken.next({
            isAuthenticated: false,
            token: null,
          });
          localStorage.removeItem("jwt");
          this.subscription.unsubscribe();
        }
      );
  }

  private initToken(): void {
    const token = localStorage.getItem("jwt");
    if (token) {
      this.jwtToken.next({
        isAuthenticated: true,
        token: token,
      });
    } else {
      this.jwtToken.next({
        isAuthenticated: false,
        token: null,
      });
    }
  }

  public inscription(user: User): Observable<User> {
    return this.http.post<User>("/api/users", user);
  }

  public connexion(credentials: {
    email: string;
    password: string;
  }): Observable<string> {
    return this.http.post<string>("/api/login", credentials).pipe(
      tap((token: string) => {
        this.jwtToken.next({
          isAuthenticated: true,
          token: token,
        });
        localStorage.setItem("jwt", token);
        //this.subscription = this.initTimer();
        //const obj = JSON.parse(this.jwtToken.value.token);
        //const valeur = this.jwtToken.value.token;
        //const obj = JSON.parse(valeur!);

        console.log(this.jwtToken.value);
      })
    );
  }

  public logout(): void {
    this.jwtToken.next({
      isAuthenticated: false,
      token: null,
    });
    localStorage.removeItem("jwt");
    this.router.navigate(["/signin"]);
  }
  
}

Bonjour, ligne 101 à 104, tu fais ça :

this.jwtToken.next({
  isAuthenticated: false,
  token: null,
});

alors que comme type, tu as ça :

export interface JwtToken {
  isAuthenticated: boolean;
  token: Token;
  user?: User;
}

la variable token ne peut pas être nulle, donc ça ne marche pas.

export interface JwtToken {
  isAuthenticated: boolean;
  token: Token | null;
  user?: User;
}

désolé pour la réponse tardive,

j'ai enfin réussi à faire fonctionner mon système je peux enfin me connecter et récupérer l'utilisateur courant comme ceci:

<pre>{{ (user$ | async | json) }}</pre>

ce qui me donne:

{
  "@context": "/api/contexts/User",
  "@id": "/api/users/1",
  "@type": "User",
  "id": 1,
  "username": "alf233",
  "roles": [
    "ROLE_USER"
  ],
  "email": "test@test.com"
}

mais pas moyen de récupérer certaines données

j'avait fait:

<tr *ngFor='let teste of user$'>
        <th scope="row">1</th>
        <td>{{teste.value}}</td>
</tr>

mais là j'ai l'erreur suivante:

error TS2322: Type 'Observable<User>' is not assignable to type 'NgIterable<any>'.

oui j'avais compris ça pour plus de clareté j'ai créé un autre sujet

en fait j'ai compris il faut que je subscribe mais j'ai une erreur d'ou mon autre sujet