若依使用JSEncrypt对密码本地存储时加解密（274）

在实际开发中，为了保护用户的敏感信息（例如密码、身份证号、公司社会信用代码等），需要对这些信息进行加密存储。JSEncrypt是一个基于RSA算法的JavaScript库，可以方便地对数据进行加解密操作。本文将演示如何在若依前后端分离项目中使用JSEncrypt对密码进行本地存储时的加解密。

JSEncrypt

JSEncrypt是一个轻量级的JavaScript库，基于RSA公钥加密算法。它提供了简单易用的API，可以方便地生成密钥对、加密和解密数据。我们可以使用JSEncrypt库来对敏感信息进行加密，然后将加密后的数据存储在本地存储（如localStorage或sessionStorage）中。

项目结构

ruoyi-ui
├── src
│   ├── utils
│   │   └── jsencrypt.js
│   ├── views
│   │   └── example
│   │       └── EncryptExample.vue

注意事项

确保密钥对的安全性，避免泄露。
加密和解密操作可能会影响性能，尽量在必要时使用。

具体步骤

第一步：安装JSEncrypt库

使用npm安装JSEncrypt库：

npm install jsencrypt

第二步：创建工具文件`jsencrypt.js`

在ruoyi-ui\src\utils目录下创建jsencrypt.js文件，内容如下：

import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'

// 密钥对生成 http://web.chacuo.net/netrsakeypair
const publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdH\n' +
  'nzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buccQd/EjEsj9ir7ijT7h96MCAwEAAQ=='

const privateKey = 'MIIBVAIBADANBgkqhkiG9w0BAQEFAASCAT4wggE6AgEAAkEAqhHyZfSsYourNxaY\n' +
  '7Nt+PrgrxkiA50efORdI5U5lsW79MmFnusUA355oaSXcLhu5xxB38SMSyP2KvuKN\n' +
  'PuH3owIDAQABAkAfoiLyL+Z4lf4Myxk6xUDgLaWGximj20CUf+5BKKnlrK+Ed8gA\n' +
  'kM0HqoTt2UZwA5E2MzS4EI2gjfQhz5X28uqxAiEA3wNFxfrCZlSZHb0gn2zDpWow\n' +
  'cSxQAgiCstxGUoOqlW8CIQDDOerGKH5OmCJ4Z21v+F25WaHYPxCFMvwxpcw99Ecv\n' +
  'DQIgIdhDTIqD2jfYjPTY8Jj3EDGPbH2HHuffvflECt3Ek60CIQCFRlCkHpi7hthh\n' +
  'YhovyloRYsM+IS9h/0BzlEAuO0ktMQIgSPT3aFAgJYwKpqRYKlLDVcflZFCKY7u3\n' +
  'UP8iWi1Qw0Y='

// 加密
export function encrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPublicKey(publicKey) // 设置公钥
  return encryptor.encrypt(txt) // 对数据进行加密
}

// 解密
export function decrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPrivateKey(privateKey) // 设置私钥
  return encryptor.decrypt(txt) // 对数据进行解密
}

第三步：在需要使用加解密的页面引入加解密方法

在需要使用加解密的页面中引入封装好的加解密方法。例如，在EncryptExample.vue页面中：

<template>
  <div>
    <input v-model="password" placeholder="Enter password" />
    <button @click="encryptPassword">Encrypt & Store</button>
    <button @click="decryptPassword">Decrypt & Retrieve</button>
    <p>Encrypted Password: {{ encryptedPassword }}</p>
    <p>Decrypted Password: {{ decryptedPassword }}</p>
  </div>
</template>

<script>
import { encrypt, decrypt } from "@/utils/jsencrypt";

export default {
  data() {
    return {
      password: '',
      encryptedPassword: '',
      decryptedPassword: ''
    };
  },
  methods: {
    encryptPassword() {
      this.encryptedPassword = encrypt(this.password);
      localStorage.setItem('encryptedPassword', this.encryptedPassword);
    },
    decryptPassword() {
      const encryptedPassword = localStorage.getItem('encryptedPassword');
      this.decryptedPassword = decrypt(encryptedPassword);
    }
  }
};
</script>

第四步：页面中使用加解密方法

在页面中使用加解密方法对数据进行加密和解密操作。

加密并存储到本地存储

encrypt(this.password);
localStorage.setItem('encryptedPassword', this.encryptedPassword);

解密并从本地存储中读取

const encryptedPassword = localStorage.getItem('encryptedPassword');
this.decryptedPassword = decrypt(encryptedPassword);

运行结果

通过上述步骤，成功实现了在若依前端项目中使用JSEncrypt对密码进行本地存储时的加解密操作。用户在输入密码后，密码会被加密并存储在本地存储中，读取时再进行解密操作，确保了敏感信息的安全性。

开发喵星球