Vue中使用localStorage存儲token并設(shè)置時效
引言
相信大家平常的有的業(yè)務邏輯,就是登錄之后要把token存下來,之前的項目大多數(shù)用的都是cookie,在這次的項目我用了vue-cookies保存token
保存沒有問題 但是我需要再main.js中寫一個全局的方法需要獲取cookie中的token 這時候就發(fā)現(xiàn)了 無論是我用vue-cookies的方法 還是js原生的獲取cookie都獲取不到 百度了很多方法都沒有實現(xiàn)
于是還是決定使用localStorage localStorage是沒有時效設(shè)置的 所以需要自己寫一個方法來設(shè)置時效
代碼參考 http://www.dbjr.com.cn/article/258870.htm
首先新建一個js文件用來放封裝的方法
storage.js
let myStorage=(function() { function setItem(params) {//存入localStorage方法 // 存入的參數(shù) const obj = { name: "", // 存入的名字 value: "", // 存入的值 expires: "", // 過期時間 startTime: new Date().getTime() //存入的時間 } const options = {};// 將obj 和傳進來的params 合并 放到options里面 實現(xiàn)js中淺拷貝 Object.assign(options, obj, params); // 判斷用戶是否設(shè)置了過期時間 if (options.expires) { // 以options.name為key, options為值放進去 localStorage.setItem(options.name, JSON.stringify(options)); } else { // 如果 options.expires 沒有設(shè)置的話, 就判斷一下value的類型 // 注意 我們 的 localStorage 只能存儲字符串 像是數(shù)組和對象要轉(zhuǎn)換下 let type = Object.prototype.toString.call(options.value); if (type == '[object Object]' || type == '[object Array]') { options.value = JSON.stringify(options.value); } localStorage.setItem(options.name, options.value); } } // 獲取數(shù)值 function getItem(name) { let item = localStorage.getItem(name); // 判斷 item 是否存在 if (item) { // 先將取到的對象 看能轉(zhuǎn)換成object 對象格式,不能就說明不是json字符串形式 try { item = JSON.parse(item); } catch (error) { item = item; } // 如果有expires的值,說明設(shè)置了失效時間 if (item.expires) { // 獲取當前時間 let now = new Date().getTime(); // 當前的時間和存入時候的時間 進行相減 和過期時間進行比較 // 大于就說明過期了 清除存儲 小于或者等于 就沒有過期 if (now - item.startTime > item.expires) { localStorage.removeItem(name); return false; // 返回一個狀態(tài)值 } else { //緩存未過期,返回值 return item.value; } } else { // 沒有設(shè)置過期時間,直接返回值 return item; } }else{ return false; // 如果item 值為undefined 則說明沒有存儲 返回false } } // 移除指定的緩存 function removeItem(name) { localStorage.removeItem(name); } // 移除所有的存儲數(shù)據(jù) function clear() { localStorage.clear(); } return { // 返回 執(zhí)行接口 setItem, getItem, removeItem, clear } })(); export default myStorage; //暴露方法
核心的代碼就是這些
引入這個js
import setStorage from 'yourpath/storage.js'
接下來就可以使用了
setStorage.setItem({value:yourtoken,name:'token',expires:604800000})//存儲token 過期時間是毫秒 我這里是一周 setStorage.getItem('token')//獲取token
以上就是Vue中使用localStorage存儲token并設(shè)置時效的詳細內(nèi)容,更多關(guān)于Vue使用localStorage存儲token并設(shè)置時效的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
解決vue+router路由跳轉(zhuǎn)不起作用的一項原因
這篇文章主要介紹了解決vue+router路由跳轉(zhuǎn)不起作用的一項原因,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vite+vue3中使用mock模擬數(shù)據(jù)問題
這篇文章主要介紹了vite+vue3中使用mock模擬數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03Vue項目配置、切換主題顏色詳細教程(mixin+scss方式,簡單高效)
這篇文章主要給大家介紹了關(guān)于Vue項目配置、切換主題顏色(mixin+scss方式)的相關(guān)資料,根據(jù)預設(shè)的配色方案,在前端實現(xiàn)動態(tài)切換系統(tǒng)主題顏色,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-11-11vue組件實現(xiàn)列表自動無限循環(huán)的方法
最近剛好有個功能需要實現(xiàn)列表的無限循環(huán)滾動,這篇文章主要給大家介紹了關(guān)于vue組件實現(xiàn)列表自動無限循環(huán)的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-11-11Vue子組件關(guān)閉后調(diào)用刷新父組件的實現(xiàn)
這篇文章主要介紹了Vue子組件關(guān)閉后調(diào)用刷新父組件的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03