vue-cli3.0创建项目，vue-cli3.0各项配置与安装， vue-cli3.0 上手教程 （二）之 登录加密——如何在vue项目中使用md5.js及base64.js

在做登录的时候对密码会进行简单的加密。简单采用MD5和base64加密，或者采用组合加密，盐值加密等，

如何在vue项目中使用md5.js及base64.js

 

一、在项目根目录下安装

npm install --save js-base64
npm install --save js-md5

二、在项目文件中引入 全局在main.js中引用

import md5 from "js-md5"

Vue.prototype.$md5 = md5

Vue.prototype.$base64 = require("js-base64").Base64

三、在项目文件中使用

 

base64

this.$base64.encode('dankogai');  // ZGFua29nYWk=
this.$base64.encode('小飼弾');    // 5bCP6aO85by+
this.$base64.encodeURI('小飼弾'); // 5bCP6aO85by-

this.$base64.decode('ZGFua29nYWk=');  // dankogai
this.$base64.decode('5bCP6aO85by+');  // 小飼弾
// note .decodeURI() is unnecessary since it accepts both flavors
this.$base64.decode('5bCP6aO85by-');  // 小飼弾

md5

this.$md5(''); // d41d8cd98f00b204e9800998ecf8427e
this.$md5('The quick brown fox jumps over the lazy dog'); // 9e107d9d372bb6826bd81d3542a419d6
this.$md5('The quick brown fox jumps over the lazy dog.'); // e4d909c290d0fb1ca068ffaddf22cbd0

// It also supports UTF-8 encoding
this.$md5('中文'); // a7bac2239fcdcb3a067903d8077c4a07

// It also supports byte `Array`, `Uint8Array`, `ArrayBuffer`
this.$md5([]); // d41d8cd98f00b204e9800998ecf8427e
this.$md5(new Uint8Array([])); // d41d8cd98f00b204e9800998ecf8427e

// Different output
this.$md5(''); // d41d8cd98f00b204e9800998ecf8427e
this.$md5.hex(''); // d41d8cd98f00b204e9800998ecf8427e
this.$md5.array(''); // [212, 29, 140, 217, 143, 0, 178, 4, 233, 128, 9, 152, 236, 248, 66, 126]
this.$md5.digest(''); // [212, 29, 140, 217, 143, 0, 178, 4, 233, 128, 9, 152, 236, 248, 66, 126]
this.$md5.arrayBuffer(''); // ArrayBuffer
this.$md5.buffer(''); // ArrayBuffer, deprecated, This maybe confuse with Buffer in node.js. Please use arrayBuffer instead.

 

注意：base64可以解密，而MD5是不可解密的算法，只需要后台存储MD5加密后的字符串进行对比就可以了