前端項目中使用jsencrypt進行字段加密

前端項目中使用jsencrypt進行字段加密。

使用步驟：①獲取公鑰②實例化對象③設置公鑰④將所需數據進行加密然后返回。

進行一個簡單的封裝如下

/**
 * npm install jsencrypt -S
 * @param getPublicKey 獲取到的公鑰，一般由后端返回，我們可以在點擊提交按鈕時發送ajax請求拿到該返回的公鑰
 * @param data 我們需要加密的數據，通過實例化對象操作之后返回一段新的加密碼，然后將其作為參數發送給后端即可
 * @returns {PromiseLike<ArrayBuffer>}
 */
function encryptData(getPublicKey, data) {

    // 實例化對象
    let encrypt = new JsEncrypt();

    // 設置公鑰
    encrypt.setPublicKey(getPublicKey);

    // 返回加密的數據
    return encrypt.encrypt(data);
}

寫個簡單的demo如下，以vue項目為例

<template>

</template>

<script>
    import JsEncrypt from 'jsencrypt'
    import axios from 'axios'
    export default {
        data() {
          return {
              username: 'hello',
              password: ''
          }
        },
        methods: {
            encryptData(getPublicKey, data) {

                // 實例化對象
                let encrypt = new JsEncrypt();

                // 設置公鑰
                encrypt.setPublicKey(getPublicKey);

                // 返回加密的數據
                return encrypt.encrypt(data);
            },
            submit() {
                axios({
                    method: 'post',
                    url: '',
                }).then(res => {
                    // res為后端返回的key，如同下面這樣
　　　　　　　　　　　　// let res = 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCa+VHPOwxi0re/GhWApLl6WQMoTKazQsPp66AD8CKt2TaPrwv+dDFdQ5jP9xRbalGhLhEBlDq20oOCuIwWAI7/s0QTTvjYIBd+yWKzuRp0E+Qe7DqIE0pMrTi/ELkqibehYIvJ4sIEM+Wj9R007WT/64vGG/FaPsK9RsZiGShOAQIDAQAB'

                    let password = this.encryptData(res, password);
                    axios({
                        method: 'post',
                        url: '',
                        data: {
                            username: this.username,
                            password: password
                        }
                    }).then(ress => {
                        console.log(ress);
                    })
                })
            }
        }
    }
</script>

<style>

</style>