一起草人妻,91av一区不卡日韩

腳本之家服務器常用軟件

快捷導航

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

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

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

項目需求中需要對用戶登錄時的密碼進行加密，在網(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();
  // 設置公鑰
  encryptor.setPublicKey(publicKey);
  // 加密數(shù)據(jù)
  return encryptor.encrypt(data);
 }
 }

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

encryptedPassword = this.encryptedData(publicKey, password);

即完成加密。

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

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

安裝

npm i node-jsencrypt

在script下導入

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

引用

一般情況下,后臺會給一個獲取公鑰的接口來進行轉(zhuǎn)換

methods: {
  init() {
   // 發(fā)送請求,獲取公鑰
   getKey().then(res => {
    this.gongKey = res.data.data; // 獲取到公鑰
    // 傳入所請求回來的公鑰,對密碼進行處理
    // 實例化加密對象
    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ù)進行加密傳輸?shù)姆椒?，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

您可能感興趣的文章:

vue-cli-service serve報錯error:0308010C:digital enve
這篇文章主要介紹了vue-cli-service serve報錯error:0308010C:digital envelope routines::unsupported的解決分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-06-06
vue3+vite+antd如何實現(xiàn)自定義主題
這篇文章主要介紹了vue3+vite+antd如何實現(xiàn)自定義主題問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue.js全局API之nextTick全面解析
本篇文章主要介紹了vue.js全局API之nextTick全面解析，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
vue在index.html中引入靜態(tài)文件不生效問題及解決方法
這篇文章主要介紹了vue在index.html中引入靜態(tài)文件不生效問題及解決方法，本文給大家分享兩種原因分析，通過實例代碼講解的非常詳細 ,需要的朋友可以參考下
2019-04-04
vue-cli的工程模板與構(gòu)建工具詳解
vue-cli提供的腳手架只是一個最基礎的，也可以說是Vue團隊認為的工程結(jié)構(gòu)的一種最佳實踐。這篇文章主要介紹了vue-cli的工程模板與構(gòu)建工具 ,需要的朋友可以參考下
2018-09-09
Vue源碼cached解析
最近在寫閉包的應用的時候，出現(xiàn)了一個cached函數(shù)，來源于Vue源碼，利用了閉包變量不會被回收的特點，可以緩存變量，cached本質(zhì)上是一個高階函數(shù)，它接受一個函數(shù)的參數(shù)，同時返回一個函數(shù)
2022-08-08
Vue無法讀取HTMLCollection列表的length問題解決
這篇文章主要介紹了Vue無法讀取HTMLCollection列表的length問題解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue左右滑動選擇日期組件封裝的方法
這篇文章主要為大家詳細介紹了vue左右滑動選擇日期組件封裝的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決
今天小編就為大家分享一篇vue動態(tài)路由:路由參數(shù)改變,視圖不更新問題的解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue3中vue-router的使用方法詳解
Vue?Router?是?Vue?的官方路由，它與?Vue.js?核心深度集成，讓用?Vue.js?構(gòu)建單頁應用變得輕而易舉，本文將通過簡單的示例為大家介紹一下vue-router的使用，需要的可以參考一下
2023-06-06