項(xiàng)目需求中需要對(duì)用戶登錄時(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對(duì)象 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 配置對(duì)密碼進(jìn)行加密(vue)
安裝
npm i node-jsencrypt
在script下導(dǎo)入
// 引入加密模塊,對(duì)密碼進(jìn)行處理const JSEncrypt = require('jsencrypt');引用
一般情況下,后臺(tái)會(huì)給一個(gè)獲取公鑰的接口來(lái)進(jìn)行轉(zhuǎn)換
methods: { init() { // 發(fā)送請(qǐng)求,獲取公鑰 getKey().then(res => { this.gongKey = res.data.data; // 獲取到公鑰 // 傳入所請(qǐng)求回來(lái)的公鑰,對(duì)密碼進(jìn)行處理 // 實(shí)例化加密對(duì)象 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對(duì)數(shù)據(jù)進(jìn)行加密傳輸?shù)姆椒?,希望?duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
新聞熱點(diǎn)
疑難解答
圖片精選