成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue中使用cookies和crypto-js實(shí)現(xiàn)記住密碼和加密

khs1994 / 2618人閱讀

摘要：最后要在狗子函數(shù)內(nèi)判斷用戶是否記住了密碼來執(zhí)行相關(guān)的操作判斷是否記住密碼注意這里的是字符串格式，因?yàn)榇孢M(jìn)中會(huì)變成判斷是否記住密碼最后，界面貼上，其中是記住密碼按鈕的值，是第一個(gè)框的值，就是第二個(gè)框的值啦。

不多BB，搞快、搞快、

使用crypto-js加解密

第一步，安裝

npm install crypto-js

第二步，在你需要的vue組件內(nèi)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"

注意這個(gè)mymessage是字符串，如果你要加密的用戶id（number類型）得先轉(zhuǎn)成字符串

更多使用請?jiān)L問官方文檔

記住密碼

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

之后進(jìn)入登錄頁面的時(shí)候，判斷是否記住了密碼（從localstorage判斷），如果記住密碼則導(dǎo)出cookies到表單；

其中保存使用setcookie方法，取出則使用getcookie方法。
ok，我們來編寫方法

//設(shè)置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(); //獲取時(shí)間
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天數(shù)
      //字符串拼接cookie，為什么這里用了==，因?yàn)榧用芎蟮淖址灿袀€(gè)=號，影響下面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("; "); //這里顯示的格式請根據(jù)自己的代碼更改
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("=="); //根據(jù)==切割
          //判斷查找相對應(yīng)的值
          if (arr2[0] == "currentPortId") {
            // Decrypt，將解密后的內(nèi)容賦值給賬號
            var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123");
            this.currentPortId = bytes.toString(CryptoJS.enc.Utf8)-0;
          } else if (arr2[0] == "password") {
            // Decrypt，將解密后的內(nèi)容賦值給密碼
            var bytes = CryptoJS.AES.decrypt(arr2[1], "secretkey123");
            this.password = bytes.toString(CryptoJS.enc.Utf8);
          }
        }
      }
    },
    //清除cookie
    clearCookie: function() {
      this.setCookie("", "", -1); 
    }

登錄的方法如下：

 login() {
      this.$http //請根據(jù)實(shí)際情況修改該方法
        .post(...)
        .then(res => {
          if (res.data.code == "success") {
            if (this.rememberPsw == true) {
               //判斷用戶是否勾選了記住密碼選項(xiàng)rememberPsw，傳入保存的賬號currentPortId，密碼password，天數(shù)30
              this.setCookie(this.currentPortId, this.password, 30);
            }else{
              this.clearCookie();
            }
            //這里是因?yàn)橐赾reated中判斷，所以使用了localstorage比較簡單，當(dāng)然你也可以直接根據(jù)cookie的長度or其他騷操作來判斷有沒有記住密碼。
            localStorage.setItem("rememberPsw", this.rememberPsw);
            
          } else {
           //----
          }
        })
        .catch(err => {
          //----
        });
    },

最后要在created狗子函數(shù)內(nèi)判斷用戶是否記住了密碼來執(zhí)行相關(guān)的操作

//判斷是否記住密碼
//**注意這里的true是字符串格式，因?yàn)锽oolean存進(jìn)localstorage中會(huì)變成String**
 created() {
    //判斷是否記住密碼
    if (localStorage.getItem("rememberPsw") == "true") {
      this.getCookie();
    }
  }

最后，界面貼上，其中rememberPsw是記住密碼按鈕的v-model值，currentPortId是第一個(gè)框的v-model值，password就是第二個(gè)框的v-model值啦。

最后

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108494.html

相關(guān)文章

  • vue項(xiàng)目實(shí)現(xiàn)記住密碼到cookie功能(附源碼)

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

    zzir 評論0 收藏0

  • 一套簡單的基于 RSA + AES 加密機(jī)制的前端解決方案

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

    Travis 評論0 收藏0

  • js使用AES加密PHP使用Openssl解密

    摘要：最近遇到的幾個(gè)網(wǎng)站在提交密碼時(shí)提交的已經(jīng)是密文，也就是說在網(wǎng)絡(luò)上傳輸?shù)拿艽a是密文，這樣提升了密碼在網(wǎng)絡(luò)傳輸中的安全性。今天一起來了解一下基于的前后端加解密流程。由于是塊加密，銘文被分割成固定長度的塊一般是字節(jié)長度，所以也是字節(jié)。 最近遇到的幾個(gè)網(wǎng)站在提交密碼時(shí)提交的已經(jīng)是密文，也就是說在網(wǎng)絡(luò)上傳輸?shù)拿艽a是密文，這樣提升了密碼在網(wǎng)絡(luò)傳輸中的安全性。 后端語言加解密已經(jīng)有很成熟的方案了，前...

    shleyZ 評論0 收藏0

  • VueJs里利用CryptoJs實(shí)現(xiàn)加密及解密

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

    shleyZ 評論0 收藏0

  • 演示Vue實(shí)現(xiàn)記住賬號密碼功能的思路和代碼

    　　實(shí)現(xiàn)思路：　　情景：在用戶登錄時(shí)若勾選記住我功能選項(xiàng)，則將登錄名和密碼（加密后）存入本地緩存，下次登錄頁面加載時(shí)自動(dòng)獲取保存好的賬號和密碼（需解密），回顯到登錄輸入框中?！　≡诒镜鼐彺婵梢杂胏ookies、localStorage、sessionStorage，但這些都有很多不同的差異，不多說廢話。直接說使用我們的，在未設(shè)置過期時(shí)間，關(guān)閉瀏覽器窗口后就被清除了，顯然是符合我們開發(fā)需求的，loc...

    3403771864 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<