Authentification par JWT et Spring Security

import axios from "axios";

export default class User {
    name = "";
    authenticated = false;
    axios = null;

    // Préparer une instance Axios avec ou sans token JWT
    initAxios(token = "") {
        let headers = {
            'Content-Type': 'application/json',
        };
        if (token != "") {
            console.log("with token");
            headers['Authorization'] = 'Bearer ' + token;
        }
        this.axios = axios.create({
            baseURL: 'http://localhost:8081/secu-users/',
            timeout: 1000,
            headers: headers,
        });
    }

    // Utilisateur standard non-authentifié
    constructor() {
        this.logout();
        this.initAxios();
    }

    // Authentification qui renvoie un Promise
    async login(name, password) {
        this.logout();
        let config = {
            params: {
                username: name,
                password: password
            }
        };
        return this.axios.get("login", config).then(r => {
            console.log('SUCCESS');
            let token = r.data;
            this.name = name;
            this.authenticated = true;
            this.initAxios(token);
            return (true);
        }).catch(r => {
            console.log('FAILURE');
            return (false);
        });
    }

    // Déconnexion
    logout() {
        this.name = "";
        this.authenticated = false;
        this.initAxios();
    }

    // Qui suis-je ?
    async whoami() {
        let result = await this.axios.get("me");
        return result.data;
    }

    // Une action limitée
    async limited() {
        let result = await this.axios.get("limited");
        return result.data;
    }

}

// Enrichir les imports
import Login  from "@/components/Login.vue";
import Logout from "@/components/Logout.vue";
import {ref, computed, provide} from "vue";
import User from "@/user.js";

...

// Définir un utilisateur et l'injecter
// dans les sous-composants
const user = ref(new User());
provide('user', user);

...

// Enrichir les routes
const routes = {
  ...
  'login': Login,
  'logout': Logout,
  ...
};

<script setup>
import {ref, inject} from "vue";

// les données de ce composant
const user = inject("user");
const name = ref("");
const password = ref("");
const message = ref("");

// soumission du formulaire
async function submitLogin() {
  let ok = await user.value.login(name.value, password.value);
  if (ok) {
    window.location.href = "#page1";
  } else {
    message.value = "bad credential";
  }
}

// Abandon
function abort() {
  console.log("abort ");
  window.location.href = "#";
}
</script>