在Vue項目中使用jsencrypt.js對數(shù)據(jù)進(jìn)行加密傳輸?shù)姆椒?/h1>
更新時間：2019年04月17日 14:44:29 作者：貴陽梁朝偉
這篇文章主要介紹了在Vue項目中使用jsencrypt.js對數(shù)據(jù)進(jìn)行加密傳輸?shù)姆椒ǎ浅２诲e，具有一定的參考借鑒價值,需要的朋友可以參考下
項目需求中需要對用戶登錄時的密碼進(jìn)行加密，在網(wǎng)上查詢些許文章后，最終與后端協(xié)商使用jsencrypt.js。
jsencrypt.js的github地址： https://github.com/travist/js...
使用yarn安裝至Vue項目
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');
引用
一般情況下,后臺會給一個獲取公鑰的接口來進(jìn)行轉(zhuǎn)換
methods: {
init() {
// 發(fā)送請求,獲取公鑰
getKey().then(res => {
this.gongKey = res.data.data; // 獲取到公鑰
// 傳入所請求回來的公鑰,對密碼進(jìn)行處理
// 實例化加密對象
var crypt = new JSEncrypt.JSEncrypt({
default_key_size: 1024
});
crypt.setPublicKey(this.gongKey);
// 拿到加密明文
let passWord = crypt.encrypt(obj.value);
});
}
}
總結(jié)
以上所述是小編給大家介紹的在Vue項目中使用jsencrypt.js對數(shù)據(jù)進(jìn)行加密傳輸?shù)姆椒?，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
-
vue-cli-service serve報錯error:0308010C:digital enve
這篇文章主要介紹了vue-cli-service serve報錯error:0308010C:digital envelope routines::unsupported的解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪 2023-06-06
-
這篇文章主要介紹了vue3+vite+antd如何實現(xiàn)自定義主題問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教 2024-03-03
-
本篇文章主要介紹了vue.js全局API之nextTick全面解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
-
vue在index.html中引入靜態(tài)文件不生效問題及解決方法
這篇文章主要介紹了vue在index.html中引入靜態(tài)文件不生效問題及解決方法，本文給大家分享兩種原因分析，通過實例代碼講解的非常詳細(xì) ,需要的朋友可以參考下 2019-04-04
-
vue-cli提供的腳手架只是一個最基礎(chǔ)的，也可以說是Vue團(tuán)隊認(rèn)為的工程結(jié)構(gòu)的一種最佳實踐。這篇文章主要介紹了vue-cli的工程模板與構(gòu)建工具 ,需要的朋友可以參考下 2018-09-09
-
最近在寫閉包的應(yīng)用的時候，出現(xiàn)了一個cached函數(shù)，來源于Vue源碼，利用了閉包變量不會被回收的特點，可以緩存變量，cached本質(zhì)上是一個高階函數(shù)，它接受一個函數(shù)的參數(shù)，同時返回一個函數(shù) 2022-08-08
-
Vue無法讀取HTMLCollection列表的length問題解決
這篇文章主要介紹了Vue無法讀取HTMLCollection列表的length問題解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教 2024-03-03
-
這篇文章主要為大家詳細(xì)介紹了vue左右滑動選擇日期組件封裝的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下 2022-04-04
-
vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決
今天小編就為大家分享一篇vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧 2019-11-11
-
Vue?Router?是?Vue?的官方路由，它與?Vue.js?核心深度集成，讓用?Vue.js?構(gòu)建單頁應(yīng)用變得輕而易舉，本文將通過簡單的示例為大家介紹一下vue-router的使用，需要的可以參考一下 2023-06-06
最新評論
項目需求中需要對用戶登錄時的密碼進(jìn)行加密，在網(wǎng)上查詢些許文章后，最終與后端協(xié)商使用jsencrypt.js。
jsencrypt.js的github地址： https://github.com/travist/js...
使用yarn安裝至Vue項目
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');
引用
一般情況下,后臺會給一個獲取公鑰的接口來進(jìn)行轉(zhuǎn)換
methods: {
init() {
// 發(fā)送請求,獲取公鑰
getKey().then(res => {
this.gongKey = res.data.data; // 獲取到公鑰
// 傳入所請求回來的公鑰,對密碼進(jìn)行處理
// 實例化加密對象
var crypt = new JSEncrypt.JSEncrypt({
default_key_size: 1024
});
crypt.setPublicKey(this.gongKey);
// 拿到加密明文
let passWord = crypt.encrypt(obj.value);
});
}
}
總結(jié)
以上所述是小編給大家介紹的在Vue項目中使用jsencrypt.js對數(shù)據(jù)進(jìn)行加密傳輸?shù)姆椒?，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
-
vue-cli-service serve報錯error:0308010C:digital enve
這篇文章主要介紹了vue-cli-service serve報錯error:0308010C:digital envelope routines::unsupported的解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06 - 這篇文章主要介紹了vue3+vite+antd如何實現(xiàn)自定義主題問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
- 本篇文章主要介紹了vue.js全局API之nextTick全面解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
-
vue在index.html中引入靜態(tài)文件不生效問題及解決方法
這篇文章主要介紹了vue在index.html中引入靜態(tài)文件不生效問題及解決方法，本文給大家分享兩種原因分析，通過實例代碼講解的非常詳細(xì) ,需要的朋友可以參考下2019-04-04 - vue-cli提供的腳手架只是一個最基礎(chǔ)的，也可以說是Vue團(tuán)隊認(rèn)為的工程結(jié)構(gòu)的一種最佳實踐。這篇文章主要介紹了vue-cli的工程模板與構(gòu)建工具 ,需要的朋友可以參考下2018-09-09
- 最近在寫閉包的應(yīng)用的時候，出現(xiàn)了一個cached函數(shù)，來源于Vue源碼，利用了閉包變量不會被回收的特點，可以緩存變量，cached本質(zhì)上是一個高階函數(shù)，它接受一個函數(shù)的參數(shù)，同時返回一個函數(shù)2022-08-08
-
Vue無法讀取HTMLCollection列表的length問題解決
這篇文章主要介紹了Vue無法讀取HTMLCollection列表的length問題解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03 - 這篇文章主要為大家詳細(xì)介紹了vue左右滑動選擇日期組件封裝的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
-
vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決
今天小編就為大家分享一篇vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11 - Vue?Router?是?Vue?的官方路由，它與?Vue.js?核心深度集成，讓用?Vue.js?構(gòu)建單頁應(yīng)用變得輕而易舉，本文將通過簡單的示例為大家介紹一下vue-router的使用，需要的可以參考一下2023-06-06