Use ASE encryption and decryption cache encapsulation in Vue project

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 ！

https://blog.csdn.net/qq_39197547/article/details/121809181https://blog.csdn.net/qq_39197547/article/details/121809181