0%

vue AES对称加密 crypto-js 教程

发布于 / 分类: vue 项目实战 / 暂无评论 / 阅读量 138

最后更新于 2019年12月18日

之前写过一次加密,这次就重新调整并发布出来,一般来说,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也运行一次.

至此,教程结束.

处理谷歌浏览器总是提示无法阻止事件的报错 win10 设置软件开机自启
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao