Maison  >  Questions et réponses  >  le corps du texte

Comment obtenir automatiquement le jeton Bearer dans l'en-tête axios en utilisant vue et laravel

J'essaie d'obtenir le jeton de l'utilisateur actuel pour récupérer des données comme ceci :

async getUser() {
    const config = {
                headers: {
                    'Accept': 'application/json',
                    'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJ...'
                }
            }
  await this.axios
    .get("/api/auth/testapi", config)
    .then((response) => {
      this.user = response.data;
    })
    .catch((error) => {
      console.log(error);
      this.user = [];
    });
},

Comment définir l'en-tête « Autorisation » pour obtenir automatiquement le jeton actuel de l'utilisateur authentifié ?

J'ai essayé le stockage local comme ceci :

async getUser() {
    const token = localStorage.getItem('access_token');
    const config = {
                headers: {
                    'Accept': 'application/json',
                    'Authorization': `Bearer ${token}`
                }
            }
  await this.axios
    .get("/api/auth/testapi", config)
    .then((response) => {
      this.user = response.data;
    })
    .catch((error) => {
      console.log(error);
      this.user = [];
    });
},

Mais l'effet n'est pas bon.

Quel est le problème ?


Mise à jour :

app.js :

require("./src/main.js");
import VueAxios from "vue-axios";
import axios from "axios";
Vue.use(VueAxios, axios);


if (localStorage.has("access_token")) {
axios.defaults.headers.common["Authorization"] =
"Bearer " + localStorage.getItem("access_token");
}

loginSuccess(accessToken) {
localStorage.setItem('access_token', accessToken);
window.location.href = '/home';
}

Le problème survient après la fin de "if"

';' expected.


P粉459440991P粉459440991300 Il y a quelques jours497

répondre à tous(1)je répondrai

  • P粉579008412

    P粉5790084122024-01-17 10:32:56

    Que vais-je faire,

    À chaque requête, sur un fichier js (pas vue), par exemple le fichier bootstrap.js (car il se chargera plus rapidement) :

    let access_token = localStorage.getItem('access_token');
    if(access_token) {
        axios.defaults.headers.common['Authorization'] = 'Bearer ' + access_token;
    }
    

    Sur votre fonction de connexion, lorsque vous connectez l'utilisateur et récupérez le jeton d'accès :

    loginSuccess(accessToken) {
        localStorage.setItem('access_token', accessToken);
        window.location.href = '/home';
    }
    

    Il redirigera l'utilisateur vers votre page d'accueil ou vers la page vers laquelle l'utilisateur doit être redirigé, et le access_token sera défini sur localStorage.

    Le dernier bit restant consiste à supprimer l'élément localStorage access_token lorsque l'utilisateur se déconnecte et éventuellement à attraper le 401 à l'aide d'un intercepteur pour supprimer le access_token et rediriger vers /login lorsque le jeton expire.

    window.axios.interceptors.response.use(function (response) {
        return response;
    }, function (error) {
        if (401 === error.response.status) {
            localStorage.removeItem('access_token');
            window.location.href = '/login'
        } else {
            return Promise.reject(error);
        }
    });
    

    Si vous envisagez d'envoyer des requêtes axios à un point de terminaison externe qui ne vous appartient pas, vous souhaiterez peut-être vérifier le domaine du 401 pour vous assurer qu'il s'agit bien de votre domaine

    répondre
    0
  • Annulerrépondre