Aller au contenu principal

31-7 Déconnexion

Dernier arrêt, la déconnexion!

Cette dernière sera plutôt simple.

  1. Premièrement créer une fonction DeconnecterUtilisateur dans ApiTokenAuthenticationStateProvider qui sera responsable de créer un utilisateur anonyme et de notifier que l'état d'authentification a changé.

    Snowfall.Web.Admin/Providers/ApiTokenAuthenticationStateProvider.cs
    public void DeconnecterUtilisateur()
    {
    var utilisateurAnonyme = new ClaimsPrincipal(new ClaimsIdentity());
    var authState = Task.FromResult(new AuthenticationState(utilisateurAnonyme));
    NotifyAuthenticationStateChanged(authState);
    }
  2. Ensuite, dans le composant Navbar, injecter AuthenticationStateProvider et ILocalStorageService. Nous en aurons besoin pour appeler la fonction de déconnexion et retirer le jeton d'authentification du Local Storage.

    Snowfall.Web.Admin/Components/Navbar.razor
    @using Blazored.LocalStorage
    @inject AuthenticationStateProvider AuthenticationStateProvider;
    @inject ILocalStorageService LocalStorage

    <!-- ... -->
  3. Puis, dans la section AuthorizeView existante du composant, on peut simplement ajouter un lien de déconnexion.

    Snowfall.Web.ClientAdmin/Components/Navbar.razor
    <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
    <AuthorizeView>
    <ul class="navbar-nav flex-grow-1">
    <li class="nav-item">
    <NavLink class="nav-link" ActiveClass="active" href="evenements">Gestion des événements</NavLink>
    </li>
    </ul>
    <ul class="navbar-nav">
    <li class="nav-item">
    <NavLink class="nav-link" href="#" @onclick="Deconnexion">Déconnexion</NavLink>
    </li>
    </ul>
    </AuthorizeView>
    </div>
  4. La fonction Deconnexionà laquelle le lien fait référence est simplement une fonction responsable de retirer la clé authToken du Local Storage et d'appeler le AuthenticationStateProvider.

    Snowfall.Web.Admin/Components/Navbar.razor
    @code {
    void Deconnexion()
    {
    LocalStorage.RemoveItemAsync("authToken");
    (AuthenticationStateProvider as ApiTokenAuthenticationStateProvider)?.DeconnecterUtilisateur();
    }
    }

Imgur