vue AES对称加密 crypto-js 教程

之前写过一次加密,这次就重新调整并发布出来,一般来说,cookie用于存储账号信息是不安全的,但是后端一般很少会给你做这个功能性的适配,只能前端硬着头皮写了,为了安全,加密是必不可少的了,这里我们就是用crypto-js的aes加密.

首先安装我们需要的插件,npm安装,其他安装自行查看

npm install crypto-js --save-dev
npm install vue-cookies --save

crypto-js官网

vue-cookie官网

安装完成后我们在需要调用的vue文件中引入,比如login.vue文件中,但是这里我们根据项目的要求,cookie需要全局引入,而加密由于是可以复用的,所以要单独写一个js文件用于调用.

首先我们在vue的main.js入口文件引入cookie

import VueCookies from 'vue-cookies'; //cookie
Vue.use(VueCookies); //注册到全局

引入后就不用管了,待会再用,我们再来编写用于加密的复用方法!

这个加密的方法一般存放在utils文件夹下的,这个文件夹在src文件夹下,没有可以自己创建一个,然后在utils文件夹中创建一个AES.js文件并打开.

先引入加密插件:

import CryptoJS from 'crypto-js';

然后我们编写加密解密方法,并暴露出去,具体内容思路就不多写了,这里放上全部内容:

/*
* 账号加密
*/
import CryptoJS from 'crypto-js';

export default {
  //加密
  encrypt(word, key) {
    if (key) {
      return CryptoJS.AES.encrypt(word, key).toString();
    } else {
      throw new Error("加密未传入密匙!");
      return false;
    }
  },
  //解密
  decrypt(word, key) {
    if (key) {
      return CryptoJS.AES.decrypt(word, key).toString(CryptoJS.enc.Utf8);
    } else {
      throw new Error("解密未传入密匙!");
      return false;
    }
  },
  //随机生成指定数量的16进制key
  generatekey(num) {
    let library = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    let key = "";
    for (var i = 0; i < num; i++) {
      let randomPoz = Math.floor(Math.random() * library.length);
      key += library.substring(randomPoz, randomPoz + 1);
    }
    return key;
  }
}

AES文件编写完,我们在login中引入这个js文件

import AES from "@/utils/AES.js";

调用的时候直接就AES.encrypt(val,key),就行了,然后我们和cookie一起使用就行了.

当用户登录成功后:

checked是是否勾选了记住密码的checkbox元素,勾选了就是true,反之false.

//记住账号的方法
keepFrom() {
      let key = AES.generatekey(43); //生成密匙
      let user = AES.encrypt(this.formResponses.username, key),
        pass = AES.encrypt(this.formResponses.password, key);
      this.$cookies.set("user", user, "7d");
      if (this.checked) {
        //勾选记住密码
        this.$cookies.set("password", pass, "7d");
        localStorage.setItem("checkedFrom", "checkedFrom"); //checked
      } else {
        //未勾选就清理掉密码
        const pass = this.$cookies.get("password");
        if (pass) {
          this.$cookies.remove("password");
        }
      }
      this.$cookies.set("key", key, "7d");
    }

该方法写在methods中,在需要时调用,然后就是解密了,我们每次进入login页面都需要自动填充账号:

AES.decrypt(user, key); 解密

//自动填写账号
    setFromData() {
      const key = this.$cookies.get("key"),
        user = this.$cookies.get("user"),
        pass = this.$cookies.get("password"),
        checked = localStorage.getItem("checkedFrom");

      if (user) {
        this.formResponses.username = AES.decrypt(user, key);
      }
      if (pass) {
        this.formResponses.password = AES.decrypt(pass, key);
      }
      if (checked === "checkedFrom") {
        this.checked = true;
      }
    }

如何判断每次进入login页面呢,我们直接在vue的mounted中写一次,表示首次的时候,然后watch监控$route路由,只要login也运行一次.

至此,教程结束.