• <center id="sm46c"></center>
  • <dfn id="sm46c"></dfn>
  • <strike id="sm46c"></strike>
  • <cite id="sm46c"><source id="sm46c"></source></cite>
    • <strike id="sm46c"><source id="sm46c"></source></strike>
      <option id="sm46c"></option>
      国产精品天天看天天狠,女高中生强奷系列在线播放,久久无码免费的a毛片大全,国产日韩综合av在线,亚洲国产中文综合专区在,特殊重囗味sm在线观看无码,中文字幕一区二区三区四区在线,无码任你躁久久久久久老妇蜜桃

      VueJs里利用CryptoJs實現Md5加密和3Des加密及解密

      2021-5-18    前端達人

      前言

      前我們介紹的用于vue用于數據簽名的操作,《【干貨】Vue TypeScript根據類生成簽名字符串》,其目的就是用于生成這個再轉MD5加密的模式進行校驗,原來我們在C#和Android里面已經實現這些方式,因為前端準備用Vue來做,所以加密這塊少不了也需要實現的。

      安裝Crypto

      Crypto里面可以把md5和3des都一起做了,所以我們直接安裝這個比較方便

      找到我們的程序目錄,按住Shift加鼠標右鍵,選擇在此處打開Powershell窗口

      然后在cmd窗口里面輸入npm install crypto-js -save-dev 

      安裝完成后可以看到紅框下面標注著成功了。


      代碼演示


      MD5加密

      我們還是用上次簽名的那個項目里面,首先要先引用Crypto-js


      getmd5,我們再寫一個GetMd5的方法,傳入的字符串直接生成MD5的字符返回,


      接下來再定義一個雙向綁定的字符串,在點擊簽名的時候同時生成md5的字符串顯示的頁面上

      運行后的效果




      3DES加密、解密

      核心代碼

      加密

         Encrypt3Des(str: string, aStrKey: string, ivstr: string): string {
              const KeyHex = CryptoJS.enc.Utf8.parse(aStrKey);
              const encrypted = CryptoJS.TripleDES.encrypt(str,
                  KeyHex,
                  {
                      mode: CryptoJS.mode.CBC,
                      padding: CryptoJS.pad.Pkcs7,
                      iv: CryptoJS.enc.Utf8.parse(ivstr)
                  });
              let hexstr = encrypted.ciphertext.toString().toUpperCase();
              console.log(hexstr);
              return hexstr;
          }

      一般網上的加解密最后紅框這里我們直接是輸出 return encrypted.tostring(),但是因為我們自己的C#和Android的3Des的加解密都是最后輸出的16進制的字符串,所以我們改為紅框這里輸出的樣式。



      解密

          Decrypt3Des(str: string, aStrKey: string, ivstr: string): string {
              const KeyHex = CryptoJS.enc.Utf8.parse(aStrKey);
              //因為我們加密的時候用到的16進制字符串,需要進行轉換
              //第一步把16進制字符串轉為WordArray格式
              const WordArray = CryptoJS.enc.Hex.parse(str);
              //第二步把WordArray再轉為base64的字符串
              const base64str = CryptoJS.enc.Base64.stringify(WordArray);
              //第三步再進行解密
              const decrypted = CryptoJS.TripleDES.decrypt(base64str,
                  KeyHex,
                  {
                      mode: CryptoJS.mode.CBC,
                      padding: CryptoJS.pad.Pkcs7,
                      iv: CryptoJS.enc.Utf8.parse(ivstr)
                  });

              return decrypted.toString(CryptoJS.enc.Utf8);
          }

      這里比較重要就是紅框里面,因為我們的加密最后輸出的是16進制的字符串,所以我們解密的時候首先要把16進制字符串轉為WordArray格式,再轉換為BASE64的字符串,最后再進行解密。因為我也是個前端小白,就是這個問題我也是研究了一下午才搞明白。

      最后下面的黃框要注意輸出的字符要轉為Utf8。




      其余設置

      我們在test.ts里面定義了兩個字符串,一個des3encryptstr的加密后的字符串,一個des3decryptstr是解密后的字符串,然后又加上了兩個方法,一個是加密的方法btnencrypt,一個是解密的方法btndecrypt,分別調用的就是我們剛才寫的兩段核心代碼。


      然后在test.vue.html里面加上雙向綁定顯示以及一個加密按鈕和一個解密按鈕。


      頁面效果

      未加密的效果

      點擊加密后的效果

      點擊解密后的效果


      藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

      截屏2021-05-13 上午11.41.03.png


      文章來源:https://my.oschina.net/u/4582134/blog/4582375

      分享此文一切功德,皆悉回向給文章原作者及眾讀者.
      免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

      藍藍設計www.li-bodun.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

      日歷

      鏈接

      個人資料

      藍藍設計的小編 http://www.li-bodun.cn

      存檔

      主站蜘蛛池模板: 国产日韩久久免费影院| 99久久99久久加热有精品| 在线免费观看a视频| 亚洲妇熟xxxx妇色黄| 国产精品亚洲第一区焦香味| 青青草一区二区免费精品| av无码一区二区大桥久未| 四虎成人精品国产永久免费| 国产精品亚洲二区在线看| 日本电影午夜福利| 亚洲乱码日产精品一二三| 黑人精品XXX一区一二区| 无码人妻系列不卡免费视频| 97久久久亚洲综合久久| 少妇特黄a一区二区三区| 国内精品久久久久久影院| 精品国产一区二区三区卡| 无码无套少妇18p在线直播| 人人超碰人摸人爱| 亚洲av无码专区在线厂| 亚洲人成网站在线观看播放不卡| 亚洲乱码一区二区三区成人小说| 亚洲熟妇无码AV在线播放| 久久99av无色码人妻蜜| 亚洲激情国产一区二区三区| 国产欧美va欧美va香蕉在| 日本一卡二卡3卡四卡网站精品| 2020国产在线视精品在| 欧美人妻一区二区三区| 精品国产亚洲av麻豆特色| 国产乱xxxxx97国语对白| 亚洲开心婷婷中文字幕| 天天爽夜夜爱| 四川丰满少妇无套内谢| 亚洲国产精彩中文乱码AV色欲| 亚洲成人av一区免费看| 国产精品无码久久久久久| 国产又黄又爽又色的免费| 日韩夜夜高潮夜夜爽无码| 日韩精品久久久肉伦网站 | 亚洲三级视频在线观看|