当前位置:网站首页>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 !
边栏推荐
- LVS four layer load balancing cluster (3) cluster function classification - HPC
- How can a sweeping robot avoid obstacles without "mental retardation"? Analysis of five mainstream obstacle avoidance techniques
- 微信扫描二维码无法下载文件的解决办法
- 单片机外设介绍:温度传感器 DS18B20
- Lambda终结操作collect
- 2022 spring semester summary
- 单片机:PCF8591硬件接口
- Lambda终结操作查找与匹配findFirst
- Discussion sur la modélisation de la série 143
- EGO Planner代码解析----CMakeLists.txt和package.xml
猜你喜欢
Fundamentals of robot obstacle avoidance system
Promise combined with await
MCU: RS485 communication and Modbus Protocol
SCM: introduction to Modbus communication protocol
Interpretation of mobile phone private charging protocol
[MySQL] index and transaction
单片机:Modbus 通信协议介绍
Single chip microcomputer: main index of a/d (analog-to-digital conversion)
1-72 convert string to decimal integer
单片机:A/D(模数转换)的主要指标
随机推荐
单片机串口通信原理和控制程序
Lambda termination operation find and match nonematch
SCM: introduction and operation of EEPROM
MCU: EEPROM multi byte read / write operation sequence
The most detailed swing transformer mask of window attachment in history -- Shaoshuai
Introduction to MCU peripherals: temperature sensor DS18B20
Lambda end operation collect
[test development] automated test selenium (II) -- common APIs for webdriver
Fundamentals of robot obstacle avoidance system
大疆无人机飞控系统的原理、组成及各传感器的作用
单片机信号发生器程序
Synching build your own synchronization cloud
Single chip microcomputer: pcf8591 application program
Principle and control program of single chip microcomputer serial port communication
[test development] fundamentals of software testing
双目视觉——打造室外避障的“最优解”
2022春学期总结
Lambda终结操作max&min
Real time requirements for 5g China Unicom repeater network management protocol
Student management system