encryptjs 加密 前端数据(vue 使用 RSA加密、java 后端 RSA解密)

1.index.html引入 <script src="./static/js/jsencrypt.min.js"></script>

或者 npm i jsencrypt -S 

第一种引入方式直接用

<template>
    <div class="rsa_box">
        <el-row v-if="!baseUrl">
            <el-button @click="testRsa">测试加密按钮</el-button>
        </el-row>
        <iframe :src="baseUrl" frameborder="0" width="100%" :height="100px"></iframe>
    </div>
</template>

<script>
    import { rsaTest } from '@/http/api'
    export default {
        data() {
            return {
                baseUrl: ''
            }
        },
        methods: {
            testRsa() {
                var encrypt = new JSEncrypt();
                rsaTest().then(res => {
                    encrypt.setPublicKey(res.data.publicKey);
                    encrypt.setPrivateKey(res.data.privateKey);
                    let userName = encrypt.encrypt(res.data.userName);
                    let userInfo = encrypt.encrypt(res.data.userInfo)
                    let code = res.data.code;
                    let href = res.data.startUrl + "?userName=" + userName + "&userInfo=" + userInfo + "&code=" + code "
                    href = href.replace(/\+/g, '%2B')//方法一:统一换成转义字符 后台在换回来
                    this.baseUrl = href
                })
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>

如果是npm 的在main.js

import JsEncrypt from 'jsencrypt'
Vue.prototype.$jsEncrypt = JsEncrypt

注意(url和token的问题):就是得出来的 String 是带 '+' 号的,但是这个加号在传给后台的时候实际是空格,前端生成的 token 是带 + 号生成的,但后台在生成 token 的时候 空格 ,导致两边的 token 对应不上

解决方案:在前端把串里的加换成空格 ,再去生成 token.replace(/\+/g,' ');  

 

posted @ 2019-01-15 13:33  蓝色帅-橙子哥  阅读(7393)  评论(0编辑  收藏  举报