Comment ajouter un jeton dans vue

Avec le développement rapide de la technologie front-end et l'expansion des scénarios d'application, le framework Vue est devenu l'un des outils importants pour le développement d'applications Web. Au cours du processus de candidature, nous devons souvent utiliser des jetons pour l'authentification et la gestion de la sécurité. Alors, comment Vue ajoute-t-il un jeton ? Cet article expliquera comment ajouter des jetons dans Vue sous les aspects suivants.

1. Qu'est-ce qu'un token ? Un token, également appelé token, est un jeton d'accès utilisé pour assurer la sécurité des utilisateurs lorsqu'ils opèrent entre le client et le serveur. Dans Vue, le jeton peut être utilisé pour vérifier l'identité de l'utilisateur et identifier si l'utilisateur dispose de droits d'accès.

2. Utilisez VueAxios pour ajouter un jeton

VueAxios est un plug-in pour Vue.js, utilisé pour communiquer avec l'API back-end. Nous pouvons utiliser VueAxios pour ajouter des jetons dans les applications Vue. Voici un exemple de code pour ajouter des jetons :

import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios, axios);

// 设置token
const token = 'your_token_here';
Vue.axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

Dans l'exemple ci-dessus, nous introduisons d'abord axios et VueAxios, puis utilisons la méthode Vue.use() pour les enregistrer dans l'instance Vue. Ensuite, nous définissons le jeton et utilisons Vue.axios.defaults.headers.common['Authorization'] =

pour définir l'en-tête de la demande. Bearer est une méthode d'autorisation dans le protocole OAuth2.0, qui est utilisée pour accéder au sujet après l'obtention. autorisation. Protéger les ressources. Bearer ${token}

3. Utilisez le plug-in Vue-Auth pour ajouter un jeton

Vue-Auth est un plug-in Vue.js qui fournit des méthodes qui vous permettent d'ajouter facilement des fonctions d'authentification et d'autorisation. Le plugin prend en charge plusieurs modes d'authentification, notamment JWT, OAuth2.0, etc. Voici un exemple de code pour ajouter un jeton à l'aide du plugin Vue-Auth :

import Vue from 'vue';
import VueAuth from '@websanova/vue-auth';
import axios from 'axios';

Vue.use(VueAuth, {
    auth: {
        request: function (req, token) {
            if(token){
                this.options.http._setHeaders.call(this, req, {Authorization: 'Bearer ' + token})
            }
        },
        response: function (res) {
            var token = res.data.token;
            if(token){
                return token;
            }
        }
    }
});

// 设置token
const token = 'your_token_here';
Vue.auth.token.set(token);

Dans l'exemple ci-dessus, nous introduisons d'abord VueAuth et axios. Ensuite, utilisez la méthode Vue.use() pour enregistrer VueAuth dans l'instance Vue et configurer les options d'authentification. L'option de requête est utilisée pour définir l'en-tête de la requête et l'option de réponse est utilisée pour définir la réponse du serveur. Lorsque le jeton est obtenu avec succès, il est enregistré.

Enfin, nous utilisons la méthode Vue.auth.token.set(token) pour enregistrer le jeton dans l'instance Vue pour une utilisation globale.

4. Utilisez des cookies pour enregistrer des jetons

En plus d'utiliser les plug-ins VueAxios et Vue-Auth, nous pouvons également utiliser des cookies pour enregistrer des jetons. Dans Vue, nous pouvons utiliser le plug-in vue-cookies pour faire fonctionner les cookies. Voici un exemple de code d'utilisation de cookies pour stocker des jetons dans Vue :

import Vue from 'vue';
import VueCookies from 'vue-cookies';

Vue.use(VueCookies);

// 设置token
const token = 'your_token_here';
Vue.$cookies.set('token', token);

Dans l'exemple ci-dessus, nous introduisons d'abord le plugin VueCookies. Enregistrez-le ensuite à l’aide de la méthode Vue.use(). Enfin, utilisez la méthode Vue.$cookies.set() pour enregistrer le jeton dans Cookies. À ce stade, nous pouvons obtenir le jeton stocké dans les cookies en accédant globalement à $cookies.

Résumé :

Le framework Vue offre une variété de façons d'ajouter des jetons, et les développeurs peuvent choisir en fonction des besoins réels. Que ce soit en utilisant VueAxios, le plug-in Vue-Auth ou en utilisant des cookies, nous devons assurer la sécurité du jeton, le mettre à jour et le vérifier régulièrement. Dans le même temps, comment ajouter des jetons aux applications Vue est également l'une des compétences de base que les ingénieurs de développement front-end doivent maîtriser.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!