Vue中使用localStorage存储token并设置时效
作者:Resssssss
这篇文章主要为大家介绍了Vue中使用localStorage存储token并设置时效,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
引言
相信大家平常的有的业务逻辑,就是登录之后要把token存下来,之前的项目大多数用的都是cookie,在这次的项目我用了vue-cookies保存token
保存没有问题 但是我需要再main.js中写一个全局的方法需要获取cookie中的token 这时候就发现了 无论是我用vue-cookies的方法 还是js原生的获取cookie都获取不到 百度了很多方法都没有实现
于是还是决定使用localStorage localStorage是没有时效设置的 所以需要自己写一个方法来设置时效
代码参考 https://www.jb51.net/article/258870.htm
首先新建一个js文件用来放封装的方法
storage.js
let myStorage=(function() { function setItem(params) {//存入localStorage方法 // 存入的参数 const obj = { name: "", // 存入的名字 value: "", // 存入的值 expires: "", // 过期时间 startTime: new Date().getTime() //存入的时间 } const options = {};// 将obj 和传进来的params 合并 放到options里面 实现js中浅拷贝 Object.assign(options, obj, params); // 判断用户是否设置了过期时间 if (options.expires) { // 以options.name为key, options为值放进去 localStorage.setItem(options.name, JSON.stringify(options)); } else { // 如果 options.expires 没有设置的话, 就判断一下value的类型 // 注意 我们 的 localStorage 只能存储字符串 像是数组和对象要转换下 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); } } // 获取数值 function getItem(name) { let item = localStorage.getItem(name); // 判断 item 是否存在 if (item) { // 先将取到的对象 看能转换成object 对象格式,不能就说明不是json字符串形式 try { item = JSON.parse(item); } catch (error) { item = item; } // 如果有expires的值,说明设置了失效时间 if (item.expires) { // 获取当前时间 let now = new Date().getTime(); // 当前的时间和存入时候的时间 进行相减 和过期时间进行比较 // 大于就说明过期了 清除存储 小于或者等于 就没有过期 if (now - item.startTime > item.expires) { localStorage.removeItem(name); return false; // 返回一个状态值 } else { //缓存未过期,返回值 return item.value; } } else { // 没有设置过期时间,直接返回值 return item; } }else{ return false; // 如果item 值为undefined 则说明没有存储 返回false } } // 移除指定的缓存 function removeItem(name) { localStorage.removeItem(name); } // 移除所有的存储数据 function clear() { localStorage.clear(); } return { // 返回 执行接口 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并设置时效的详细内容,更多关于Vue使用localStorage存储token并设置时效的资料请关注脚本之家其它相关文章!