spring boot+iview 前后端分离架构之登陆密码RSA加密（三十二）

川长思鸟来 2021-12-11 08:19 812阅读 0赞

### spring boot 与 iview 前后端分离架构之登陆密码RSA加密（三十二） ###

*  公众号
 *  密码加密
 *   *  RSA工具类的编写
     *  生成RSA的公钥和私钥
     *  改造我们的登录模块
     *   *  改造application-dev.yml
         *  改造UserService
     *  前端改造
     *   *  引入jsencrypt，实现前端的RSA加密
         *  改造main.js
         *  login.vue改造
     *  运行项目

# 公众号 #

![在这里插入图片描述][20191218155125364.jpg]  
大家可以直接微信扫描上面的二维码关注我的公众号，然后回复【bg32】 里面就会给到源代码的下载地址同时会附上相应的视频教程，并定期在我的公众号上给大家推送相应的技术文章，欢迎大家关注我的公众号。

# 密码加密 #

在我们登录的时候，我们的密码前文都是使用明文进行密码的传输的，那么为了防止密码在传输的过程中被截获，因此我们采用RSA公钥加密的方式来对密码进行加密，后端使用RSA的私钥进行密码的解密。

## RSA工具类的编写 ##

在后端我们编写一个RsaUtil工具类，该类实现对密码进行解密的功能，代码如下：

private static final int DEFAULT_RSA_KEY_SIZE = 2048;
    
        private static final String KEY_ALGORITHM = "RSA";
    
        /**
         * 生成RSA 公私钥,可选长度为1025,2048位.
         */
        public static Map<String,String> generateRsaKey(int keySize) {
            Map<String,String> result = new HashMap<>(2);
            try {
                KeyPairGenerator keyPairGen = KeyPairGenerator.getInstance(KEY_ALGORITHM);
    
                // 初始化密钥对生成器，密钥大小为1024 2048位
                keyPairGen.initialize(keySize, new SecureRandom());
                // 生成一个密钥对，保存在keyPair中
                KeyPair keyPair = keyPairGen.generateKeyPair();
                // 得到公钥字符串
                result.put("publicKey", new String(Base64.encodeBase64(keyPair.getPublic().getEncoded())));
                // 得到私钥字符串
                result.put("publicKey", new String(Base64.encodeBase64(keyPair.getPrivate().getEncoded())));
            } catch (GeneralSecurityException e) {
                e.printStackTrace();
            }
            return result;
        }

## 生成RSA的公钥和私钥 ##

直接调用我们的RsaUtil工具类的generateRsaKey方法就会帮助我们生成我们所需要的公钥和私钥。

## 改造我们的登录模块 ##

### 改造application-dev.yml ###

在该文件底下配置私钥的信息，改造如下：

auth:
      # authToken的过期时间
      authTokenExpire: 3600
      # refreshToken过期时间
      refreshTokenExpire: 7200
      # 放行的权限列表，采用小写的冒号分隔
      releaseUrl: /user/refreshToken
      # false表示用户单点登陆,true表示用户多点登录
      singleLanding: false
      # 私钥的key
      privateKey: 私钥的信息

### 改造UserService ###

// 注入私钥信息
        @Value("${auth.privateKey}")
        private String privateKey;
        // 改造登录方法
        public ReturnInfo login(String loginAccount, String loginPassword) {
            loginPassword = RsaUtil.decrypt(loginPassword, privateKey);
            return authProvider.login(loginAccount, loginPassword);
        }

## 前端改造 ##

### 引入jsencrypt，实现前端的RSA加密 ###

打开package.json在dependencies底下引入以下的依赖

"jsencrypt": "^3.0.0-rc.1"

接着下载依赖

cnpm install

### 改造main.js ###

main.js中引入全局的签名方法

import JsEncrypt from 'jsencrypt';
    
    /**
     * 配置全局的加密方法
     * @param obj 需要加密的字符串
     */
    Vue.prototype.$encruption = function (obj) {
      let encrypt = new JsEncrypt();
      encrypt.setPublicKey(
        `-----BEGIN PUBLIC KEY-----MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC+r+ZME01ZtSKuZJqf892FGNcP1k4q47D+xPDQHpeudHSsjN/0+Tit4mEL3nbc4mFzHbNwcXz/y588LbtOoDhqRVaZAessTESvjgbeJFKFvD0eqCD3zeTL2FfABPJS2w47e5khwLjaVJpz0F/7S6gsAxf4n3GiHud3XibCWZItTQIDAQAB-----END PUBLIC KEY-----`
      )
      return encrypt.encrypt(obj);
    };

### login.vue改造 ###

登录的时候对密码进行RSA加密  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]

loginPassword: this.$encruption(this.loginForm.loginPassword)

## 运行项目 ##

接着我们将项目运行起来，然后登录我们会看到我们的控制台这边已经实现了密码的加密传输了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]  
上一篇文章地址：[spring boot+iview 前后端分离架构之文件上传的实现（三十一）][spring boot_iview]  
下一篇文章地址：[spring boot 与 iview 前后端分离架构之基于socketIo的消息推送的实现（三十三）][spring boot _ iview _socketIo]

[20191218155125364.jpg]: /images/20211211/3c038074f84b4dedacc09564850ce308.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70]: /images/20211211/32aacb83e75a42b68a023829aff33d02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbnpoZWZlbmc4OQ_size_16_color_FFFFFF_t_70 1]: /images/20211211/7a758f6fec4a4ca49c17fc3f0db97d1d.png
[spring boot_iview]: https://blog.csdn.net/linzhefeng89/article/details/95247609
[spring boot _ iview _socketIo]: https://blog.csdn.net/linzhefeng89/article/details/95254947