vue使用jsencrypt實現(xiàn)rsa前端加密的操作代碼
更新時間:2023年09月06日 14:44:45 作者:范特西是只貓
這篇文章主要介紹了vue使用jsencrypt實現(xiàn)rsa前端加密,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
實現(xiàn) RSA 加密
介紹 vue 完成 rsa 加密傳輸,
jsencrypt
實現(xiàn)參數(shù)的前端加密
1 安裝 jsencrypt
npm install jsencrypt
2 編寫 jsencrypt.js
- 在
utils
文件夾中新建jsencrypt.js
文件,內(nèi)容如下: - 注意點:一般公鑰都是后端生成好的,之間給到前端,需要注意的需要讓后端把生成的公鑰放入
.txt
文件中。把.txt
文件給前端,否則可能會出現(xiàn)無法使用的可能
import JSEncrypt from "jsencrypt/bin/jsencrypt.min"; // 密鑰對生成 http://web.chacuo.net/netrsakeypair // 公鑰進行加密(后端給前端的公鑰) // 測試數(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"; // 私鑰進行解密 const privateKey = ""; // 加密 export function encrypt(txt) { const encryptor = new JSEncrypt(); encryptor.setPublicKey(publicKey); // 設(shè)置公鑰 return encryptor.encrypt(txt); // 對數(shù)據(jù)進行加密 } // 解密 export function decrypt(txt) { const encryptor = new JSEncrypt(); encryptor.setPrivateKey(privateKey); // 設(shè)置私鑰 return encryptor.decrypt(txt); // 對數(shù)據(jù)進行解密 }
3. 頁面使用
import { encrypt, decrypt } from "@/utils/jsencrypt"; // 請求參數(shù) let params = { username: "admin", password: encrypt(123456),//對123456進行rsa加密 };
到此這篇關(guān)于vue使用jsencrypt實現(xiàn)rsa前端加密的操作代碼的文章就介紹到這了,更多相關(guān)vue rsa前端加密內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue.js基于v-for實現(xiàn)批量渲染 Json數(shù)組對象列表數(shù)據(jù)示例
這篇文章主要介紹了vue.js基于v-for實現(xiàn)批量渲染 Json數(shù)組對象列表數(shù)據(jù),結(jié)合實例形式分析了vue.js使用v-for遍歷json格式數(shù)據(jù)渲染列表相關(guān)操作技巧,需要的朋友可以參考下2019-08-08淺談vue中document.getElementById()拿到的是原值的問題
這篇文章主要介紹了淺談vue中document.getElementById()拿到的是原值的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07vue項目設(shè)置scrollTop不起作用(總結(jié))
這篇文章主要介紹了vue項目設(shè)置scrollTop不起作用(總結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12