Legen Sie den lokalen Token-Cache in Vue fest

In der Front-End-Entwicklung ist häufig eine Überprüfung der Benutzeridentität erforderlich, um die Legitimität und Sicherheit des Benutzers sicherzustellen. Die Token-Authentifizierung ist zu einer zunehmend verbreiteten Methode geworden. Sie ermöglicht es Benutzern, sich anzumelden und bei nachfolgenden Besuchen ihr Konto und Passwort nicht erneut eingeben zu müssen. In Vue-Anwendungen gibt es häufig solche Anforderungen. Beispielsweise ist beim Senden einer Anfrage ein Token erforderlich, um auf geschützte Ressourcen zuzugreifen, oder eine Token-Verifizierung ist erforderlich, wenn auf einigen Seiten Routing-Schutzmaßnahmen durchgeführt werden, für deren Eingabe eine Anmeldung erforderlich ist. Wie richtet man also den lokalen Token-Cache in Vue ein?

In diesem Artikel erfahren Sie, wie Sie localStorage in Vue verwenden, um das Token lokal zwischenzuspeichern, sodass das Token für einen bestimmten Zeitraum gültig bleiben kann, nachdem der Benutzer die Seite aktualisiert oder den Browser geschlossen hat.

Was ist localStorage?

localStorage ist eine neu hinzugefügte Funktion in HTML5 und bietet die folgenden Vorteile:

1. Im Vergleich zu Cookies speichert localStorage eine größere Datenmenge und kann etwa 5 MB speichern In localStorage gespeicherte Daten werden nicht mit der Anfrage an den Server gesendet, was hilft, Anfragebandbreite zu sparen und die Anwendungsleistung zu verbessern.
2. Mit localStorage können Sie einfache Hinzufügungen, Löschungen, Änderungen und Abfragen von Daten lokal auf dem Client durchführen.
3. Verwenden Sie localStorage in Vue für das lokale Token-Caching

In Vue-Anwendungen müssen wir den Token-Wert des Benutzers nach der Anmeldung normalerweise lokal auf dem Client speichern, damit der Benutzer weiterhin angemeldet bleiben kann, wenn er eine neue Seite öffnet oder aktualisiert den Seitenstatus, ohne dass eine erneute Authentifizierung erforderlich ist.

Das Folgende ist ein Beispielcode für die Verwendung von localStorage zum Zwischenspeichern von Token in Vue:

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

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

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

Unter anderem kann die setItem-Methode von localStorage verwendet werden, um den Token-Wert lokal auf dem Client zu speichern, und die getItem-Methode kann den Token-Wert abrufen. und die Methode „removeItem“ kann den gespeicherten Token-Wert lokal löschen.

Daher müssen wir in Vue-Anwendungen normalerweise den vom Server zurückgegebenen Token-Wert in localStorage speichern, nachdem sich der Benutzer angemeldet hat. Bei zukünftigen Anfragen kann die vorherige Identitätsauthentifizierung fortgesetzt werden, solange das Token aus localStorage gelesen wird Informationen, um die Identitätsauthentifizierung erfolgreich zu bestehen.

Das Folgende ist ein Beispielcode, der axios interceptor + localStorage für die Token-Überprüfung verwendet:

// 实例化 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;

Fügen Sie in diesem Beispielcode einen Anforderungs-Interceptor über axios.interceptors.request hinzu und lesen Sie den Token-Wert aus localStorage, bevor Sie die Anforderung senden, und fügen Sie hinzu Token für den Anforderungsheader, damit bei der Identitätsauthentifizierung im Hintergrund der aktuell Zugriff anfordernde Benutzer identifiziert werden kann. Wenn im Antwort-Interceptor der zurückgegebene Statuscode nicht autorisiert ist, wird der Token-Wert aus localStorage gelöscht und zur erneuten Authentifizierung zur Anmeldeseite gesprungen.

Zusammenfassung

Die Verwendung der Token-Authentifizierung ist zu einer gängigen Methode in der Front-End-Entwicklung geworden, und auch die Verwendung von localStorage für das Token-Caching wird häufig verwendet. In Vue können wir localStorage problemlos zum Speichern, Abrufen und Löschen von Token verwenden. Es ist zu beachten, dass Sie bei der Verwendung von localStorage für das lokale Caching die Grundsätze der Client-Sicherheit befolgen müssen, um den Verlust vertraulicher Daten zu verhindern, z. B. die Verschlüsselung des Tokens und die ausschließliche Weitergabe verschlüsselter Daten usw.

Das obige ist der detaillierte Inhalt vonLegen Sie den lokalen Token-Cache in Vue fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!