Comment utiliser le backend Node.js et jsonwebtoken pour implémenter l'authentification d'autorisation Vue.js ?

Question

J'apprends vuejs et nodejs pour configurer l'authentification pour un prochain projet étudiant.

Pour ce faire, j'ai créé une API qui permet la création de cartes de personnages sur lesquelles on peut cliquer pour visualiser l'historique du personnage.

Cela fonctionnait bien donc j'ai piraté la partie authentification et j'ai réussi à autoriser la création d'utilisateur et à connecter le dernier avec jsonwebtoken et tout a fonctionné sur le backend mais quand je suis sur le frontend, je peux accéder aux caractères lorsque l'utilisateur se connecte. fonctionne et renvoie l'erreur que j'ai écrite si rien ne fonctionne. Je tiens à préciser que lorsque je me connecte, le jeton est créé correctement car le backend le renvoie correctement avec l'ID utilisateur, mais lorsque j'arrive sur la page du personnage et que je regarde les en-têtes de la requête, je ne vois pas le message "Autorisation : Attendez Il y a un "jeton" et je ne sais pas si je dois faire autre chose sur le front-end que récupérer une liste de caractères

Je me demandais si le problème ne venait pas du package npm "cors" que j'avais téléchargé et réécrit les autorisations sur les en-têtes de requête, mais rien n'a fonctionné.

Je tiens à préciser que j'utilise axios pour obtenir ma liste de personnages.

Je peux récupérer le token dans la demande de connexion mais je ne sais pas comment l'utiliser pour permettre à l'utilisateur d'accéder aux personnages

Il s'agit d'une erreur non autorisée lors de la connexion fonctionne et redirige vers une liste de personnages :

Voici le middleware d'authentification du backend :

Voici mon itinéraire en utilisant le middleware d'authentification :

Désolé si j'ai raté quelque chose sur la façon d'écrire une bonne question ici, je ne suis pas habitué au stackoverflow, donc si je dois fournir des informations plus spécifiques, veuillez me le faire savoir dans les commentaires

Merci d'avoir lu

Answer 1

Vous devez définir l'en-tête Autorisation pour chaque demande nécessitant une authentification.

Si vous utilisez une instance axios personnalisée pour vos requêtes, vous pouvez utiliser un intercepteur pour spécifier l'en-tête d'autorisation, par exemple :

axiosInstance.interceptors.request.use(config => {
  const token = /* your token */;
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }

  return config;
});

Alternativement, si vous n'utilisez pas une telle instance, vous pouvez la définir sur :

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;