vue.js 怎么做md5加密

发布网友

我来回答

共3个回答

懂视网

本章给大家介绍关于vue中使用cookies和crypto-js如何实现密码的加密与记住密码，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

使用crypto-js加解密

第一步，安装

npm install crypto-js

第二步，在你需要的vue组件内import

import CryptoJS from "crypto-js";

第三步，使用

 // Encrypt 加密 
 var cipherText = CryptoJS.AES.encrypt(
 "my message",
 "secretkey123"
 ).toString();
 console.log(cipherText)
 // Decrypt 解密
 var bytes = CryptoJS.AES.decrypt(cipherText, "secretkey123");
 var originalText = bytes.toString(CryptoJS.enc.Utf8);
 console.log(originalText); // 'my message'

注意这个mymessage是字符串，如果你要加密的用户id（number类型）得先转成字符串

更多使用请访问官方文档

记住密码

1. 实现原理是登录的时候，如果勾选了记住密码（把‘记住密码’状态保存到localstorage）就保存账号密码到cookies；

2. 之后进入登录页面的时候，判断是否记住了密码（从localstorage判断），如果记住密码则导出cookies到表单；

其中保存使用setcookie方法，取出则使用getcookie方法。
ok，我们来编写方法

//设置cookie
 setCookie(portId, psw, exdays) {
 // Encrypt，加密账号密码
 var cipherPortId = CryptoJS.AES.encrypt(
 portId+'',
 "secretkey123"
 ).toString();
 var cipherPsw = CryptoJS.AES.encrypt(psw+'', "secretkey123").toString();
 console.log(cipherPortId+'/'+cipherPsw)//打印一下看看有没有加密成功

 var exdate = new Date(); //获取时间
 exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
 //字符串拼接cookie，为什么这里用了==，因为加密后的字符串也有个=号，影响下面getcookie的字符串切割，你也可以使用更炫酷的符号。
 window.document.cookie =
 "currentPortId" +
 "==" +
 cipherPortId +
 ";path=/;expires=" +
 exdate.toGMTString();
 window.document.cookie =
 "password" +
 "==" +
 cipherPsw +
 ";path=/;expires=" +
 exdate.toGMTString();
 },
 //读取cookie
 getCookie: function() {
 if (document.cookie.length > 0) {
 var arr = document.cookie.split("; "); //这里显示的格式请根据自己的代码更改
 for (var i = 0; i < arr.length; i++) {
  var arr2 = arr[i].split("=="); //根据==切割
  //判断查找相对应的值
  if (arr2[0] == "currentPortId") {
  // Decrypt，将解密后的内容赋值给账号
  var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123");
  this.currentPortId = bytes.toString(CryptoJS.enc.Utf8)-0;
  } else if (arr2[0] == "password") {
  // Decrypt，将解密后的内容赋值给密码
  var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123");
  this.password = bytes.toString(CryptoJS.enc.Utf8);
  }
 }
 }
 },
 //清除cookie
 clearCookie: function() {
 this.setCookie("", "", -1); 
 }

登录的方法如下：

 login() {
 this.$http //请根据实际情况修改该方法
 .post(...)
 .then(res => {
  if (res.data.code == "success") {
  if (this.rememberPsw == true) {
  //判断用户是否勾选了记住密码选项rememberPsw，传入保存的账号currentPortId，密码password，天数30
  this.setCookie(this.currentPortId, this.password, 30);
  }else{
  this.clearCookie();
  }
  //这里是因为要在created中判断，所以使用了localstorage比较简单，当然你也可以直接根据cookie的长度or其他骚操作来判断有没有记住密码。
  localStorage.setItem("rememberPsw", this.rememberPsw);
  
  } else {
  //----
  }
 })
 .catch(err => {
  //----
 });
 },

最后要在created狗子函数内判断用户是否记住了密码来执行相关的操作

//判断是否记住密码
//**注意这里的true是字符串格式，因为Boolean存进localstorage中会变成String**
 created() {
 //判断是否记住密码
 if (localStorage.getItem("rememberPsw") == 'true') {
 this.getCookie();
 }
 }

最后，界面贴上，其中rememberPsw是记住密码按钮的v-model值，currentPortId是第一个框的v-model值，password就是第二个框的v-model值啦。

热心网友

一，有关于JS md5加密：
下载包：
1：md5.js    ； 

2： md4.js   ；

3： sha1.js。

二，使用MD5加密的方法：
下载md5.js文件，在网页中引用该文件:

< script type="text/javascript" src="md5.js">< /script>

三，在你需要使用MD5加密的地方如此调用:

< script type="text/javascript" >
hash = hex_md5("input string");
< /script>

其他两个算法类似。

用javascript加密的好处是可以在客户端完成加密之后传送到服务端，
即可以减轻服务端负担，也可以保证传输的安全。

可以使用crypto-js插件来进行加密的。

我就说一下在node环境中使用吧（直接引入其实也差不多）

1，首先安装crypto-js包：

一般加密的地方都是需要发送ajax，所以最好把ajax再封装一下（这样只要在这里加密就可以了），将封装的ajax文件挂到VUE全局方法（就是在在入口的地方使用Vue.prototype）

2，在ajax文件处引入下面两个文件：

3，最后在需要使用的地方用这“CryptoJS.MD5（需要加密的值）”。

热心网友

我是使用crypto-js插件来进行加密的。我就说一下在node环境中使用吧（直接引入其实也差不多）

首先安装crypto-js包

一般加密的地方都是需要发送ajax，所以最好把ajax再封装一下（这样只要在这里加密就可以了），将封装的ajax文件挂到VUE全局方法（就是在在入口的地方使用Vue.prototype）

在ajax文件处引入下面两个文件

最后在需要使用的地方用这“CryptoJS.MD5（需要加密的值）”