您好,登錄后才能下訂單哦!
這篇文章主要講解了“vue中怎么設(shè)置token本地緩存”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“vue中怎么設(shè)置token本地緩存”吧!
localStorage 是 HTML5 中新加入的一個(gè)特性,它可以將數(shù)據(jù)存儲(chǔ)在客戶端本地,具有以下幾個(gè)優(yōu)點(diǎn):
與 Cookie 比較而言,localStorage 存儲(chǔ)的數(shù)據(jù)量更大,可以存儲(chǔ) 5MB 左右的數(shù)據(jù);
存儲(chǔ)在 localStorage 中的數(shù)據(jù)不會(huì)隨著請(qǐng)求發(fā)往服務(wù)器端,這有助于節(jié)省請(qǐng)求帶寬,提升應(yīng)用性能;
可以使用 localStorage 實(shí)現(xiàn)在客戶端本地對(duì)數(shù)據(jù)進(jìn)行簡(jiǎn)單的增刪改查操作。
在 Vue 應(yīng)用中,我們通常需要在登錄后將用戶的 Token 值存儲(chǔ)到客戶端本地,這樣在用戶打開新頁面或者刷新頁面時(shí)依然能夠保持登錄狀態(tài),而無需再次進(jìn)行身份驗(yàn)證。
下面是一個(gè)使用 localStorage 在 Vue 中進(jìn)行 Token 緩存的示例代碼:
// 存儲(chǔ) Token localStorage.setItem('token', 'xxxxxxxxxx'); // 獲取 Token let token = localStorage.getItem('token'); // 刪除 Token localStorage.removeItem('token');
其中,使用 localStorage 的 setItem 方法可以將 Token 值存儲(chǔ)到客戶端本地,getItem 方法可以獲取 Token 值,removeItem 方法可以將存儲(chǔ)的 Token 值從本地刪除。
因此,在 Vue 應(yīng)用中,我們通常需要在用戶進(jìn)行登錄后,將服務(wù)端返回的 Token 值存儲(chǔ)到 localStorage 中,以后的請(qǐng)求中,只要從 localStorage 中讀取 Token,就可以繼續(xù)使用之前的身份認(rèn)證信息,從而順利通過身份認(rèn)證。
下面是一個(gè)使用 axios 攔截器 + localStorage 進(jìn)行 Token 驗(yàn)證的示例代碼:
// 實(shí)例化 axios 對(duì)象 const axiosInstance = axios.create({ baseURL: 'https://api.example.com' }); // 添加 request 攔截器 axiosInstance.interceptors.request.use((config) => { // 從 localStorage 中獲取 Token let token = localStorage.getItem('token'); // 配置請(qǐng)求頭包含 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') { // 如果返回的狀態(tài)碼為 401(未授權(quán)),則從 localStorage 中刪除 Token,并跳轉(zhuǎn)到登錄頁面重新認(rèn)證 localStorage.removeItem('token'); router.push({name: 'login'}); } return response; }, (error) => { return Promise.reject(error); }); export default axiosInstance;
在這段示例代碼中,通過 axios.interceptors.request 添加請(qǐng)求攔截器,在發(fā)送請(qǐng)求前從 localStorage 中讀取 Token 值,并將 Token 添加到請(qǐng)求頭中,這樣在后臺(tái)進(jìn)行身份認(rèn)證時(shí)就能夠識(shí)別當(dāng)前請(qǐng)求訪問的用戶是誰。而在響應(yīng)攔截器中,如果返回的狀態(tài)碼為未授權(quán),則從 localStorage 中刪除 Token 值,并跳轉(zhuǎn)到登錄頁面重新認(rèn)證。
感謝各位的閱讀,以上就是“vue中怎么設(shè)置token本地緩存”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對(duì)vue中怎么設(shè)置token本地緩存這一問題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。