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.
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) :
Sur votre fonction de connexion, lorsque vous connectez l'utilisateur et récupérez le jeton d'accès :
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.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