在做Laravel5.4写Vue2写一个小项目,使用 vuex 管理状态 ,axios 请求后台数据,然后使用 vue-router 跳转页面,。正常流程没有任何问题,但刷新页面的时候 vuex 中的数据全部没有了。这是由于JavaScript是运行在内存中,浏览器刷新的时候会清空之前数据对象请求的内存,导致之前的数据就丢失。要想持久化数据,常见的方法是放在本地 localstorage 中。为了避免用户随意更改数据,在网上找到了一个 crypto-js JavaScript加密库,简单记录一下使用流程。

介绍

crypto-jsJavaScript 提供了各种各样的加密算法。目前已支持的算法包括: MD5、SHA-1、SHA-256、AES、Rabbit、MARC4、HMAC、HMAC-MD5、HMAC-SHA1、HMAC-SHA256、PBKDF2

安装

npm install crypto-js -S

也可以使用淘宝cnpm 进行安装

导入

使用方式有两种,一种是模块化导入,另一种是导入所有的模块和方法。

  • 模块化导入:
//导入AES加密模块
import {AES} from 'crypto-js'
//导入SHA256加密模块
import {SHA256} from 'crypto-js'
...
console.log(SHA256("Message"));
  • 导入所有
import Crypto from 'crypto-js'
...
console.log(CryptoJS.HmacSHA1("Message", "Key"));

简单示例

这里我只简单的介绍一下项目中使用的 AES 加密解密。 AES 加密方式都是字符串,所以在 Vue 中对象形式的数据需要用 Json.stringify() 方法将对象转换为字符串。

  • 字符串加密解密
import { AES, enc } from 'crypto-js'
// Encrypt
var ciphertext = AES.encrypt('my message', 'iwanli');

// Decrypt
var bytes  = AES.decrypt(ciphertext.toString(), 'iwanli');
var plaintext = bytes.toString(enc.Utf8);

console.log(plaintext);
  • 对象加密解密
import { AES, enc } from 'crypto-js'
var data = [{id: 1}, {id: 2}]

// Encrypt
var ciphertext = AES.encrypt(JSON.stringify(data), 'iwanli');

// Decrypt
var bytes  = AES.decrypt(ciphertext.toString(), 'iwanli');
var decryptedData = JSON.parse(bytes.toString(enc.Utf8));

console.log(decryptedData);

AES 加密解密中注意第二个参数一定要一致

其他加密模块

还有很多加密模块,目前我只需要双向的加密解密算法,其他的都没有尝试,这里只是列一下支持的算法:

  • crypto-js/core
  • crypto-js/x64-core
  • crypto-js/lib-typedarrays
  • crypto-js/md5
  • crypto-js/sha1
  • crypto-js/sha256
  • crypto-js/sha224
  • crypto-js/sha512
  • crypto-js/sha384
  • crypto-js/sha3
  • crypto-js/ripemd160
  • crypto-js/hmac-md5
  • crypto-js/hmac-sha1
  • crypto-js/hmac-sha256
  • crypto-js/hmac-sha224
  • crypto-js/hmac-sha512
  • crypto-js/hmac-sha384
  • crypto-js/hmac-sha3
  • crypto-js/hmac-ripemd160
  • crypto-js/pbkdf2
  • crypto-js/aes
  • crypto-js/tripledes
  • crypto-js/rc4
  • crypto-js/rabbit
  • crypto-js/rabbit-legacy
  • crypto-js/evpkdf
  • crypto-js/format-openssl
  • crypto-js/format-hex
  • crypto-js/enc-latin1
  • crypto-js/enc-utf8
  • crypto-js/enc-hex
  • crypto-js/enc-utf16
  • crypto-js/enc-base64
  • crypto-js/mode-cfb
  • crypto-js/mode-ctr
  • crypto-js/mode-ctr-gladman
  • crypto-js/mode-ofb
  • crypto-js/mode-ecb
  • crypto-js/pad-pkcs7
  • crypto-js/pad-ansix923
  • crypto-js/pad-iso10126
  • crypto-js/pad-iso97971
  • crypto-js/pad-zeropadding
  • crypto-js/pad-nopadding

Github

Github主页: https://github.com/brix/crypto-js


Source: http://blog.iwanli.me/article/yJAWgAWo.html

Leave a comment