在Vue項(xiàng)目中使用jsencrypt.js對數(shù)據(jù)進(jìn)行加密傳輸?shù)姆椒?/h1>

 更新時(shí)間：2019年04月17日 14:44:29   作者：貴陽梁朝偉  

這篇文章主要介紹了在Vue項(xiàng)目中使用jsencrypt.js對數(shù)據(jù)進(jìn)行加密傳輸?shù)姆椒?，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

項(xiàng)目需求中需要對用戶登錄時(shí)的密碼進(jìn)行加密，在網(wǎng)上查詢些許文章后，最終與后端協(xié)商使用jsencrypt.js。

jsencrypt.js的github地址： https://github.com/travist/js...

使用yarn安裝至Vue項(xiàng)目

yarn add jsencrypt --dep

或者使用npm

npm install jsencrypt --dep

引入jsencrypt

import { JSEncrypt } from 'jsencrypt'

可封裝為全局混合，便于調(diào)用

公鑰為后端提供，如前端需要解密數(shù)據(jù)，則需要后端提供私鑰。此處只封裝了加密。

methods: {
 // 加密
 encryptedData(publicKey, data) {
  // 新建JSEncrypt對象
  let encryptor = new JSEncrypt();
  // 設(shè)置公鑰
  encryptor.setPublicKey(publicKey);
  // 加密數(shù)據(jù)
  return encryptor.encrypt(data);
 }
 }

調(diào)用函數(shù)加密，此處的公鑰是我從后端那獲取的，然后加密密碼

encryptedPassword = this.encryptedData(publicKey, password);

即完成加密。

更多使用可查閱官方文檔 http://travistidwell.com/jsen...

PS：下面看下jsencrypt 配置對密碼進(jìn)行加密(vue)

安裝

npm i node-jsencrypt

在script下導(dǎo)入

// 引入加密模塊,對密碼進(jìn)行處理
const JSEncrypt = require('jsencrypt');

引用

一般情況下,后臺(tái)會(huì)給一個(gè)獲取公鑰的接口來進(jìn)行轉(zhuǎn)換

methods: {
  init() {
   // 發(fā)送請求,獲取公鑰
   getKey().then(res => {
    this.gongKey = res.data.data; // 獲取到公鑰
    // 傳入所請求回來的公鑰,對密碼進(jìn)行處理
    // 實(shí)例化加密對象
    var crypt = new JSEncrypt.JSEncrypt({
     default_key_size: 1024
    });
    crypt.setPublicKey(this.gongKey);
    // 拿到加密明文
    let passWord = crypt.encrypt(obj.value);
   });
  }
 }

總結(jié)

以上所述是小編給大家介紹的在Vue項(xiàng)目中使用jsencrypt.js對數(shù)據(jù)進(jìn)行加密傳輸?shù)姆椒?，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

您可能感興趣的文章:

• Js參數(shù)RSA加密傳輸之jsencrypt.js的使用
• jQuery+C#實(shí)現(xiàn)參數(shù)RSA加密傳輸功能【附j(luò)sencrypt.js下載】
• vue使用JSEncrypt對密碼本地存儲(chǔ)時(shí)加解密的實(shí)現(xiàn)
• Java實(shí)現(xiàn)前端jsencrypt.js加密后端解密的示例代碼
• 前端加密cryptojs與JSEncrypt使實(shí)例詳解
• Vue中使用jsencrypt進(jìn)行RSA非對稱加密的操作方法
• Vue使用JSEncrypt實(shí)現(xiàn)rsa加密及掛載方法
• 前端利用jsencrypt.js進(jìn)行RSA加密示例詳解

• vue
• 加密傳輸
• jsencrypt.js

相關(guān)文章

• 

  UNIapp實(shí)現(xiàn)局域網(wǎng)內(nèi)在線升級(jí)的操作方法

  這篇文章主要介紹了UNIapp實(shí)現(xiàn)局域網(wǎng)內(nèi)在線升級(jí)的操作方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

  2024-03-03
• 

  .html頁面引入vue并使用公共組件方式

  這篇文章主要介紹了.html頁面引入vue并使用公共組件方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

  2023-01-01
• 

  vue 將多個(gè)過濾器封裝到一個(gè)文件中的代碼詳解

  這篇文章主要介紹了vue 將多個(gè)過濾器封裝到一個(gè)文件中實(shí)現(xiàn)方法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

  2020-09-09
• 

  淺談Vue項(xiàng)目骨架屏注入實(shí)踐

  這篇文章主要介紹了淺談Vue項(xiàng)目骨架屏注入實(shí)踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

  2019-08-08
• 

  詳解刷新頁面vuex數(shù)據(jù)不消失和不跳轉(zhuǎn)頁面的解決

  這篇文章主要介紹了詳解刷新頁面vuex數(shù)據(jù)不消失和不跳轉(zhuǎn)頁面的解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

  2018-01-01
• 

  Element-UI表格嵌入popover遇到的問題及解決方案

  在表格中我們通常需要在每一行的一些單元格中顯示popover,這篇文章主要給大家介紹了關(guān)于Element-UI表格嵌入popover遇到的問題及解決方案,需要的朋友可以參考下

  2023-11-11
• 

  vue實(shí)現(xiàn)豎屏滾動(dòng)公告效果

  這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)豎屏滾動(dòng)公告效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2022-04-04
• 

  在Vue3項(xiàng)目中使用如何echarts問題

  這篇文章主要介紹了在Vue3項(xiàng)目中使用如何echarts問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

  2023-05-05
• 

  Vue+Node實(shí)現(xiàn)大文件上傳和斷點(diǎn)續(xù)傳

  文件上傳在很多項(xiàng)目中都用的到，如果是幾M的很快就傳送完畢，如果是大文件呢？本文將利用Vue+Node實(shí)現(xiàn)大文件上傳和斷點(diǎn)續(xù)傳，感興趣的可以了解一下

  2022-04-04
• 

  gulp模塊使用方法示例詳解

  這篇文章主要為大家介紹了gulp模塊使用方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

  2022-09-09

最新評論