当前位置:网站首页>Use ASE encryption and decryption cache encapsulation in Vue project
Use ASE encryption and decryption cache encapsulation in Vue project
2022-06-13 04:05:00 【Shadow night with the wind】
Cache encryption function encapsulation
Not long ago, I developed a project that requires data cache encryption , For the convenience of handling , Encapsulate a cache file .
Use ASE Encryption and decryption
When caching data, encrypt the data , Decrypt the cached data .
For local debugging , Local data is not encrypted , Online data encryption processing
// Judge whether it is a development environment The development environment does not need encryption Online environments require encryption
hasEncrypt = process.env.NODE_ENV === "development";
Use ASE Before encryption, you need to introduce ase
npm install crypto-js --save-dev
Of course, I use encapsulated locally ASE Tool class , You can modify the code according to the actual situation
What I use in my project is localStorage Cache encryption and decryption , You can also modify the code according to your needs
The reference codes are as follows :
/*
* @Author: wangweiruning
* @Date: 2021-12-08 17:37:34
* @Last Modified by: chenjie
* @Last Modified time: 2021-12-09 15:16:23
*/
const EncryptUtils = require('../encrypt/encryptUtils')
let hasEncrypt = process.env.NODE_ENV === "development"; // Judge whether it is a development environment The development environment does not need encryption Online environments require encryption
let timeout = 60 * 60 * 24 * 7; // Cache time The default cache 7 God
const WebStorage = class WebStorage {
hasEncrypt = false;
constructor() {
this.hasEncrypt = hasEncrypt
}
getKey(key) {
return key.toUpperCase();
}
/**
* @description Set up storage
* @param key Store property name
* @param value Store property values
* @param expire Expiration period
*/
set(key, value, expire = timeout) {
// if (!expire) expire = timeout;
const stringData = JSON.stringify({
value,
time: new Date(),
expire: !isNullOrUndef(expire) ? new Date().getTime() + expire * 1000 : null
})
const stringValue = this.hasEncrypt ? EncryptUtils.AESEncrypt(stringData) : stringData
localStorage.setItem(this.getKey(key), stringValue)
}
/**
* @description Get storage
* @param key Store property name
* @returns Stored value or null
*/
get(key, def) {
const val = localStorage.getItem(this.getKey(key));
if (!val) return def || null;
try {
const decData = this.hasEncrypt ? EncryptUtils.AESDecrypt(val) : val;
const data = JSON.parse(decData)
const { value, expire } = data;
if (isNullOrUndef(expire) || expire >= new Date().getTime()) {
return value
}
this.remove(key)
} catch (error) {
return def || null
}
}
/**
* @description Delete a storage
* @param key Store property name
*/
remove(key) {
localStorage.removeItem(this.getKey(key))
}
/**
* @description Clear all storage
*/
clear() {
localStorage.clear()
}
}
export function isNull(val) {
return val === null
}
export function isDef(val) {
return typeof val !== 'undefined'
}
export function isUnDef(val) {
return !isDef(val)
}
export function isNullOrUndef(val) {
return isUnDef(val) || isNull(val)
}
export const localS = new WebStorage();
Of course, it is very convenient to use , Refer to the following code :
/*
* @Author: wangweiruning
* @Date: 2021-12-08 17:37:27
* @Last Modified by: chenjie
* @Last Modified time: 2021-12-09 11:00:23
*/
import { localS } from './local'
// Set the cache
localS.set('userInfo', { name: "wangweiruning", token: "test" }, null)
// Access to the cache
let user = localS.get('userInfo');
// Instructions
// sessionStorage and localStorage In the same way Refer to the above
effect
Print :
Cache encryption :
The cache is not encrypted :
Finally, it needs to be encapsulated ASE file , Please read the next article ASE Encryption and decryption encapsulation !
边栏推荐
猜你喜欢
Interpretation of mobile phone private charging protocol
Single chip microcomputer: MODBUS multi computer communication program design
单片机信号发生器程序
Synching build your own synchronization cloud
干预分析 + 伪回归
[zeloengine] localization process /imgui Chinese culture
[笔记]vs2015 编写汇编masm32之使用MASM32库
leetcode.1 --- 两数之和
GoFrame第五天
单片机:PCF8591硬件接口
随机推荐
单片机:A/D 差分输入信号
Manage PC startup items
LVS four layer load balancing cluster (3) cluster function classification - HPC
[test development] use case
四旋翼飞行器避障系统基础
Real time question answering of single chip microcomputer / embedded system
Lambda终结操作查找与匹配allMatch
USB-IF BC1.2充电协议解读
Fundamentals of robot obstacle avoidance system
[web] cookies and sessions
[note]vs2015 compilation of masm32 using MASM32 Library
Lambda终结操作查找与匹配noneMatch
史上最详细的Swin-Transformer 掩码机制(mask of window attentation)————shaoshuai
Meaning of different values of margin and padding
Synching build your own synchronization cloud
The most detailed swing transformer mask of window attachment in history -- Shaoshuai
Lambda termination operation find and match nonematch
单片机:D/A 输出
No more! Another member of the team left..
UE4 learning notes - functions of terrain tool