首頁  >  文章  >  web前端  >  vue中cookies以及crypto-js如何實現密碼的加密並記住

vue中cookies以及crypto-js如何實現密碼的加密並記住

不言
不言原創
2018-09-21 17:47:094121瀏覽

本章為大家介紹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 <p>登入的方法如下:</p><pre class="brush:php;toolbar:false"> 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值啦。

vue中cookies以及crypto-js如何實現密碼的加密並記住

以上是vue中cookies以及crypto-js如何實現密碼的加密並記住的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn