Définir le cache local des jetons dans vue

Dans le développement front-end, la vérification de l'identité de l'utilisateur est souvent requise pour garantir la légitimité et la sécurité de l'utilisateur. L'authentification par jeton est devenue une méthode de plus en plus courante. Elle permet aux utilisateurs de se connecter sans avoir besoin de saisir à nouveau leur compte et leur mot de passe pour vérification lors de visites ultérieures. De telles exigences existent souvent dans les applications Vue. Par exemple, un jeton est requis pour accéder aux ressources protégées lors de l'envoi d'une demande, ou une vérification du jeton est requise lorsque des gardes de routage sont effectués sur certaines pages qui nécessitent une connexion pour accéder. Alors comment configurer le cache local de Token dans Vue ?

Cet article expliquera comment utiliser localStorage dans Vue pour mettre en cache le jeton localement, afin que le jeton puisse rester valide pendant une certaine période de temps après que l'utilisateur ait actualisé la page ou fermé le navigateur.

Qu'est-ce que localStorage ?

localStorage est une fonctionnalité nouvellement ajoutée dans HTML5. Il peut stocker des données localement sur le client et présente les avantages suivants :

1. Par rapport aux cookies, localStorage stocke une plus grande quantité de données et peut stocker environ 5 Mo de données ; les données stockées dans localStorage ne seront pas envoyées au serveur avec la requête, ce qui permet d'économiser la bande passante de la requête et d'améliorer les performances de l'application ;
2. Vous pouvez utiliser localStorage pour implémenter de simples ajouts, suppressions, modifications et requêtes de données localement sur le client.
3. Utilisez localStorage dans Vue pour la mise en cache locale des jetons

Dans les applications Vue, nous devons généralement stocker la valeur du jeton de l'utilisateur localement sur le client après la connexion, afin que l'utilisateur puisse toujours rester connecté lorsqu'il ouvre une nouvelle page ou actualise le statut de la page sans avoir à s'authentifier à nouveau.

Ce qui suit est un exemple de code pour utiliser localStorage pour mettre en cache le jeton dans Vue :

// 存储 Token
localStorage.setItem('token', 'xxxxxxxxxx');

// 获取 Token
let token = localStorage.getItem('token');

// 删除 Token
localStorage.removeItem('token');

Parmi eux, la méthode setItem de localStorage peut être utilisée pour stocker la valeur du jeton localement sur le client, la méthode getItem peut être utilisée pour obtenir le La valeur du jeton et la méthode RemoveItem peuvent être utilisées pour stocker la valeur du jeton. La valeur du jeton est supprimée localement.

Par conséquent, dans les applications Vue, nous devons généralement stocker la valeur du jeton renvoyée par le serveur dans localStorage après la connexion de l'utilisateur. Dans les demandes futures, tant que le jeton est lu à partir de localStorage, l'authentification précédente peut être poursuivie. informations pour réussir l’authentification d’identité.

Ce qui suit est un exemple de code qui utilise l'intercepteur axios + localStorage pour la vérification du jeton :

// 实例化 axios 对象
const axiosInstance = axios.create({
    baseURL: 'https://api.example.com'
});

// 添加 request 拦截器
axiosInstance.interceptors.request.use((config) => {
    // 从 localStorage 中获取 Token
    let token = localStorage.getItem('token');

    // 配置请求头包含 Token
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }

    return config;
}, (error) => {
    return Promise.reject(error);
});

// 添加 response 拦截器
axiosInstance.interceptors.response.use((response) => {
    if (response.data.code === '401') {
        // 如果返回的状态码为 401（未授权），则从 localStorage 中删除 Token，并跳转到登录页面重新认证
        localStorage.removeItem('token');
        router.push({name: 'login'});
    }

    return response;
}, (error) => {
    return Promise.reject(error);
});

export default axiosInstance;

Dans cet exemple de code, ajoutez un intercepteur de requête via axios.interceptors.request et lisez la valeur du jeton depuis localStorage avant d'envoyer la requête, et ajoutez Jeton dans l'en-tête de la demande, afin que l'utilisateur qui demande actuellement l'accès puisse être identifié lors de l'authentification de l'identité en arrière-plan. Dans l'intercepteur de réponse, si le code d'état renvoyé n'est pas autorisé, la valeur du jeton est supprimée de localStorage et passe à la page de connexion pour une nouvelle authentification.

Résumé

L'utilisation de l'authentification par jeton est devenue une méthode courante dans le développement front-end, et l'utilisation de localStorage pour la mise en cache des jetons est également souvent utilisée. Dans Vue, nous pouvons facilement utiliser localStorage pour stocker, obtenir et supprimer un jeton. Il convient de noter que lorsque vous utilisez localStorage pour la mise en cache locale, vous devez suivre les principes de sécurité du client pour éviter la fuite de données sensibles, comme le cryptage du jeton et la transmission uniquement des données cryptées, etc.

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!