zoukankan      html  css  js  c++  java
  • 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,' ');  

     

  • 相关阅读:
    C++ handle(句柄类) part2
    C++代理类的使用
    第一个blog
    C++ Handle(句柄) part1
    关于理想团队的构建和对软件流程的理解
    提供就医帮助的安卓APP
    上海地铁游移动APP需求分析
    关于学习了《构建之法》的若干存在疑惑的问题
    安卓APP开发简单实例 结对编程心得
    Vue修改Vue项目运行端口号(CLI2)
  • 原文地址:https://www.cnblogs.com/lhl66/p/10271388.html
Copyright © 2011-2022 走看看