vue中設定token本地緩存

在前端開發中，常常需要進行使用者驗證，確保使用者的合法性與安全性。而 Token 身份驗證成為了越來越常見的方式，它使得用戶登入後，在後續的訪問中不需要再次輸入帳號密碼進行驗證，只需要傳遞 Token 即可。在 Vue 應用程式中也常常會有這樣的需求，例如在發送請求時需要 Token 來存取受保護的資源，或是在一些需要登入才能進入的頁面進行路由守衛時需要進行 Token 驗證。那麼在 Vue 中如何設定 Token 的本機快取呢？

本文將介紹如何在 Vue 中使用 localStorage 進行 Token 的本地緩存，讓 Token 在用戶刷新頁面或關閉瀏覽器後依然能夠保持一定時間的有效性。

什麼是 localStorage？

localStorage 是HTML5 中新加入的特性，它可以將資料儲存在客戶端本地，具有以下優點：

1. 與Cookie 比較而言，localStorage 儲存的資料量更大，可以儲存5MB 左右的資料；
2. 儲存在localStorage 中的資料不會隨著請求發送到伺服器端，這有助於節省請求頻寬，提升應用程式效能；
3. 可以使用localStorage 實作在客戶端本地對資料進行簡單的增刪改查操作。

在Vue 中使用localStorage 進行Token 本機快取

在Vue 應用程式中，我們通常需要在登入後將使用者的Token 值儲存到客戶端本地，這樣在使用者開啟新頁面或刷新頁面時依然能夠保持登入狀態，而無需再次進行身份驗證。

下面是使用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 應用程式中，我們通常需要在使用者登入後，將服務端傳回的Token 值儲存到localStorage 中，以後的請求中，只要從localStorage 中讀取Token，就可以繼續使用先前的身份認證信息，從而順利通過身份認證。

下面是使用axios 攔截器localStorage 進行Token 驗證的範例程式碼：

// 实例化 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 讀取Token 值，並將Token 加入到請求頭中，這樣在後台進行身份認證時就能夠識別目前請求存取的使用者是誰。而在回應攔截器中，如果傳回的狀態碼為未授權，則從 localStorage 中刪除 Token 值，並跳到登入頁面重新認證。

總結

使用 Token 認證在前端開發中已經成為了常見的方式，而使用 localStorage 進行 Token 快取也常常被使用。在 Vue 中，我們可以輕鬆地使用 localStorage 實作 Token 的儲存、取得和刪除。值得注意的是，在使用 localStorage 進行本地快取時，需要遵循客戶端安全的原則，防止敏感資料洩露，例如將 Token 進行加密處理，只傳遞加密後的資料等等。

以上是vue中設定token本地緩存的詳細內容。更多資訊請關注PHP中文網其他相關文章！