vue中使用cookies和crypto-js實現記住密碼和加密

khs1994 發布于2019-08-26 12:19 / 2613人閱讀

摘要：最后要在狗子函數內判斷用戶是否記住了密碼來執行相關的操作判斷是否記住密碼注意這里的是字符串格式，因為存進中會變成判斷是否記住密碼最后，界面貼上，其中是記住密碼按鈕的值，是第一個框的值，就是第二個框的值啦。

不多BB，搞快、搞快、

使用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類型）得先轉成字符串

更多使用請訪問官方文檔

記住密碼

實現原理是登錄的時候，如果勾選了記住密碼（把‘記住密碼’狀態保存到localstorage）就保存賬號密碼到cookies；

之后進入登錄頁面的時候，判斷是否記住了密碼（從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值啦。

最后

我也是一個新手，寫得不好的地方請輕噴~有好的建議也可以評論告訴下~謝謝大家

GPU云服務器云服務器 php中session和cookie md5和sha加密代碼實現 vue 中使用 webrtc vue中使用webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108494.html

vue項目實現記住密碼到cookie功能(附源碼)

摘要：這里不做加密功能源碼鏈接項目實現表單登錄頁保存賬號和密碼到功能覺得對你有幫助的話，下哦。 showImg(https://segmentfault.com/img/remote/1460000013052745?w=443&h=335); 實現功能： 1.記住密碼勾選，點登陸時，將賬號和密碼保存到cookie，下次登陸自動顯示到表單內 2.不勾選，點登陸時候則清空之前保存到cooki...

zzir 2019-08-26 11:31 評論0 收藏0
一套簡單的基于 RSA + AES 加密機制的前端解決方案

摘要：前言因公司現有后臺管理系統項目需對部分網絡請求接口的重要數據進行加密，整合了一套簡單的基于加密機制的前端解決方案。用戶已登錄成功，頁面刷新后將會重新生成，這時候需從中獲取并和上傳后端，后端重新綁定和。前言因公司現有后臺管理系統項目需對部分網絡請求接口的重要數據進行加密，整合了一套簡單的基于 RSA + AES 加密機制的前端解決方案。參考文獻： crypto 廖雪峰 crypt...

Travis 2019-08-23 17:58 評論0 收藏0
js使用AES加密PHP使用Openssl解密

摘要：最近遇到的幾個網站在提交密碼時提交的已經是密文，也就是說在網絡上傳輸的密碼是密文，這樣提升了密碼在網絡傳輸中的安全性。今天一起來了解一下基于的前后端加解密流程。由于是塊加密，銘文被分割成固定長度的塊一般是字節長度，所以也是字節。最近遇到的幾個網站在提交密碼時提交的已經是密文，也就是說在網絡上傳輸的密碼是密文，這樣提升了密碼在網絡傳輸中的安全性。后端語言加解密已經有很成熟的方案了，前...

shleyZ 2019-08-23 18:37 評論0 收藏0
VueJs里利用CryptoJs實現加密及解密

摘要：第一步安裝安裝第二步創建在文件目錄下創建一個文件對頁面上輸入的密碼進行加密傳輸給后臺進行驗證，對返回的數據進行解密，在頁面展示引入源碼對密碼進行加密，傳輸給后臺進行驗證需要加密的密碼對密碼加密的秘鑰加密的密文加密對加密之后的密文在頁面上第一步安裝安裝crypto-jsshowImg(https://segmentfault.com/img/bVbrXWM); 第二步創建在js文件...

shleyZ 2019-08-23 17:11 評論0 收藏0
演示Vue實現記住賬號密碼功能的思路和代碼

　　實現思路：　　情景：在用戶登錄時若勾選記住我功能選項，則將登錄名和密碼（加密后）存入本地緩存，下次登錄頁面加載時自動獲取保存好的賬號和密碼（需解密），回顯到登錄輸入框中。　　在本地緩存可以用cookies、localStorage、sessionStorage，但這些都有很多不同的差異，不多說廢話。直接說使用我們的，在未設置過期時間，關閉瀏覽器窗口后就被清除了，顯然是符合我們開發需求的，loc...

3403771864 2022-10-23 14:40 評論0 收藏0