Vue中使用localStorage存储token并设置时效
SegmentFault
共 3015字,需浏览 7分钟
·
2021-01-06 18:42
相信大家平常的有的业务逻辑
就是登录之后要把token存下来
之前的项目大多数用的都是cookie
在这次的项目我用了vue-cookies保存token
保存没有问题 但是我需要再main.js中写一个全局的方法需要获取cookie中的token 这时候就发现了 无论是我用vue-cookies的方法 还是js原生的获取cookie都获取不到 百度了很多方法都没有实现
于是还是决定使用 localStorage localStorage 是没有时效设置的 所以需要自己写一个方法来设置时效
代码参考链接
https://blog.csdn.net/yunchong_zhao/article/details/106565915
首先新建一个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中使用rem
vue中使用rem 写移动端页面 借助两个插件,将px进行转化为rem。lib-flexible 用于设置 rem 基准值。由淘宝手机前端开发团队编写的。postcss-pxtorem 是一款 postcss 插件,用于将单位转化为 rem。主要步骤:a、npm i...
雪天web
0