vue使用jsencrypt實(shí)現(xiàn)rsa前端加密的操作代碼
更新時(shí)間：2023年09月06日 14:44:45 作者：范特西是只貓
這篇文章主要介紹了vue使用jsencrypt實(shí)現(xiàn)rsa前端加密,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
實(shí)現(xiàn) RSA 加密
介紹 vue 完成 rsa 加密傳輸，
jsencrypt實(shí)現(xiàn)參數(shù)的前端加密
1 安裝 jsencrypt
npm install jsencrypt
2 編寫 jsencrypt.js
- 在
utils文件夾中新建jsencrypt.js文件，內(nèi)容如下： - 注意點(diǎn)：一般公鑰都是后端生成好的，之間給到前端，需要注意的需要讓后端把生成的公鑰放入
.txt文件中。把.txt文件給前端，否則可能會出現(xiàn)無法使用的可能
import JSEncrypt from "jsencrypt/bin/jsencrypt.min";
// 密鑰對生成 http://web.chacuo.net/netrsakeypair
// 公鑰進(jìn)行加密（后端給前端的公鑰）
// 測試數(shù)據(jù)
const publicKey =
"MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAoZFKd5QKsXGcYa0SHVsy\n" +
"Mmtw6ODLpi0KAX3VyYKnlFcUa3T7NSiWEvozm+Pe2KGFP/QOtxo4Psg5RzhGC9Rk\n" +
"R15ZiaySq7uOEIPmLXFG46tItCPt3r+JS0ycCTX7QGkOX5jN/tLkuEV482anH/qi\n" +
"bRbh9Vajh9axxxxxxxxxx2K+M7PNN0z4P8944zVN4Z0LoXnPZ9x511VMRzWyAgJU\n" +
"700j6l1Uwx+Cw0sBY379XW8jkBTqq/wQ1RBOCbLT0jgKql+cPVJ6Exqu6sMIKtKH\n" +
"sueLOAQh31kosj8QXvhf+21+YOkoKLXxMRyw4WD7HOBXHQZp0q6+Em4ZmpvltPhm\n" +
"vwIDAQAB";
// 私鑰進(jìn)行解密
const privateKey = "";
// 加密
export function encrypt(txt) {
const encryptor = new JSEncrypt();
encryptor.setPublicKey(publicKey); // 設(shè)置公鑰
return encryptor.encrypt(txt); // 對數(shù)據(jù)進(jìn)行加密
}
// 解密
export function decrypt(txt) {
const encryptor = new JSEncrypt();
encryptor.setPrivateKey(privateKey); // 設(shè)置私鑰
return encryptor.decrypt(txt); // 對數(shù)據(jù)進(jìn)行解密
}3. 頁面使用
import { encrypt, decrypt } from "@/utils/jsencrypt";
// 請求參數(shù)
let params = {
username: "admin",
password: encrypt(123456),//對123456進(jìn)行rsa加密
};
到此這篇關(guān)于vue使用jsencrypt實(shí)現(xiàn)rsa前端加密的操作代碼的文章就介紹到這了,更多相關(guān)vue rsa前端加密內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue使用Vue.extend方法仿寫個(gè)loading加載中效果實(shí)例
在vue中提供v-loading命令,用于div的loading加載,下面這篇文章主要給大家介紹了關(guān)于vue使用Vue.extend方法仿寫個(gè)loading加載中效果的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
vue.js el-table動態(tài)單元格列合并方式
這篇文章主要介紹了vue.js el-table動態(tài)單元格列合并方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要給大家介紹了關(guān)于vue源碼之批量異步更新策略的相關(guān)資料，關(guān)于vue異步更新是我們?nèi)粘ｉ_發(fā)中經(jīng)常遇到的一個(gè)功能，需要的朋友可以參考下2021-05-05
這篇文章主要介紹了如何解決Element UI中NavMenu折疊菜單的坑,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
在vue中，我們在main.ts引入的全局注冊的組件是可以不需要import導(dǎo)入而直接使用的，使用的時(shí)候是自己全局注冊組件時(shí)的名稱，而不是組件名，這篇文章主要介紹了vue3中批量全局注冊組件,需要的朋友可以參考下2023-05-05
VUE中computed 、created 、mounted的先后順序說明
這篇文章主要介紹了VUE中computed 、created 、mounted的先后順序說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
本文介紹Vue組件間通信方式，Vue組件間通信一直是個(gè)重要的話題，雖然官方推出的Vuex狀態(tài)管理方案可以很好的解決組件之間的通信問題，但是在組件庫內(nèi)部使用Vuex往往會比較重，本文將系統(tǒng)的羅列出幾種不使用Vuex，比較實(shí)用的組件間的通信方式，希望能幫助到大家2022-09-09
這篇文章主要介紹了Vue自定義指令，文章從背景開始詳細(xì)介紹Vue自定義指令的詳細(xì)內(nèi)容，隨著Vue自定義指令的相關(guān)資料展開具體內(nèi)容,需要的朋友可以參考一下2021-11-11
vue實(shí)現(xiàn)鼠標(biāo)滑動預(yù)覽視頻封面組件示例詳解
這篇文章主要為大家介紹了vue實(shí)現(xiàn)鼠標(biāo)滑動預(yù)覽視頻封面組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
本篇文章主要介紹了vue-router 權(quán)限控制的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09