vue でトークンのローカル キャッシュを設定する

フロントエンド開発では、ユーザーの正当性とセキュリティを確保するためにユーザー ID の検証が必要になることがよくあります。トークン認証は、ますます一般的な方法になっています。これにより、ユーザーはログインすることができ、次回のアクセス時に確認のためにアカウントとパスワードを再度入力する必要がなく、トークンを渡すだけで済みます。 Vue アプリケーションでは、このような要件がよくあります。たとえば、リクエストを送信するときに保護されたリソースにアクセスするにはトークンが必要になったり、ログインが必要な一部のページでルーティング ガードが実行されるときにトークンの検証が必要になったりします。では、Vue でトークンのローカル キャッシュを設定するにはどうすればよいでしょうか?

この記事では、Vue で localStorage を使用してトークンをローカルにキャッシュし、ユーザーがページを更新するかブラウザを閉じた後もトークンを一定期間有効に保つ方法を紹介します。

localStorage とは何ですか?

localStorage は HTML5 で新しく追加された機能で、クライアント上でローカルにデータを保存でき、次のような利点があります:

1. localStorage は Cookie と比較してデータ量が大きく、約 5 MB のデータを保存できます。
2. localStorage に保存されたデータはリクエストとともにサーバーに送信されないため、リクエストの帯域幅が節約され、アプリケーションのパフォーマンスが向上します。
3. localStorage を使用すると、次のことが可能になります。データに対する単純な追加、削除、変更、クエリ操作をクライアント上でローカルに実装します。

Vue でトークンのローカル キャッシュに localStorage を使用する

Vue アプリケーションでは、通常、ログイン後にユーザーのトークン値をクライアント上でローカルに保存する必要があります。これにより、ユーザーが開いたときに、新しいページを作成するとき、またはページを更新するときに、再度認証する必要がなく、ログインしたままにすることができます。

次は、localStorage を使用して Vue で Token をキャッシュするためのサンプル コードです:

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

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

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

そのうち、localStorage の setItem メソッドを使用して、Token 値をクライアント上でローカルに保存できます。 getItem メソッドを使用して Token. 値を取得でき、removeItem メソッドを使用して、保存されている Token 値をローカルに削除できます。

したがって、Vue アプリケーションでは、通常、ユーザーがログインした後、サーバーから返されたトークン値を localStorage に保存する必要があります。後続のリクエストでは、トークンが localStorage から読み取られる限り、続行できます。以前の ID 認証情報を使用して、ID 認証を正常に通過します。

以下は、トークン検証に axios インターセプター localStorage を使用するサンプル コードです:

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

このサンプル コードでは、トークンの読み取りリクエストを送信する前に、axios.interceptors.request を通じてリクエスト インターセプターを追加します。 localStorage から値を取得し、要求ヘッダーにトークンを追加します。これにより、現在アクセスを要求しているユーザーがバックグラウンドでの ID 認証中に識別できるようになります。レスポンス インターセプターでは、返されたステータス コードが不正な場合、Token 値が localStorage から削除され、再認証のためにログイン ページにジャンプします。

概要

トークン認証の使用はフロントエンド開発における一般的な方法となっており、トークンのキャッシュに localStorage を使用することもよく使用されます。 Vue では、localStorage を使用してトークンを保存、取得、削除することが簡単にできます。ローカル キャッシュに localStorage を使用する場合は、トークンを暗号化し、暗号化されたデータのみを渡すなど、機密データの漏洩を防ぐためにクライアント セキュリティの原則に従う必要があることに注意してください。

以上がvue でトークンのローカル キャッシュを設定するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。