En-tête d'autorisation Vue-Resource impossible à définir

Question

Impossible de définir l'en-tête d'autorisation sur "Bearer (token)" dans le fichier main.js après Connexion, affiche 401 non autorisé mais les en-têtes sont définis après l'actualisation lors de l'accès aux fichiers du serveur

description détaillée:

Spécifications:

1. Vue @ 2.2.1
2. Vue @ Ressources 1.3.4
3. Router Vue @ 2.6.0
4. Laravel @ 5.4
5. Laravel Passport @ 2,0

Détails:

J'utilise "Connexion" module signer dans et stocker des jetons d'accès et d'actualisation dans le stockage local en utilisant un package Auth comme suit -

[image Desc: Auth Code Package (setters et getters pour jeton)]

[image desc: Connexion extrait de module pour jeton à l'arrivée - fonctionne correctement]

Comme indiqué ci-dessus, la route va au « tableau de bord », qui charge le module de fichiers, mais ne parvient pas à récupérer les données de https://localhost:8000/api/files

[image desc: non autorisée sans refresh] [4

[image desc: sans rafraîchir, Vue.http.headers.common [ 'autorisation'] montre « Bearer null "]

Mais passe le jeton après avoir actualisé la page ...!

[Imag desc: après actualisation, le jeton est passé avec succès]

Et continue à travailler jusqu'à ce que je ne vous rafraîchir sur page de connexion après avoir signé et signer à nouveau.

Toutes les solutions seront appréciées.

Answer 1

Définissez votre en-tête commun après avoir défini votre jeton et expiration, cela vous permet de définir votre en-tête lors de la connexion.

setToken(){ 
    localStorage.setItem('token', token) 
    localStorage.setItem('expiration', expiration) 
    Vue.http.headers.common['Authorization'] = 'Bearer ' + this.getToken(); 
}