前端验证码，RSA加密

发送验证码的实现

    1 使用vant中的File组件, 并且在里面添加template模板，嵌套发送验证码和倒计时CountDown组件, 用个变量控制是否是点击了倒计时，初始为false, 点击了发送验证码变量设置为true,倒计时结束设置为false, 通过这个变量v-if v-else显示是倒计时还是显示发送验证码
    2 
    <template>
        <Field
            v-model='info.captcha'
            center
            clearable
            placeholder='请输入手机短信'
            :error='error'
            :rules='[
                {required: true, message: '请输入验证码'},
                {validator: validatorCode, message: '验证码格式不正确'}
            ]'
        >
            <template #extra>
                <span v-if='!sendCode' @click='send'>发送验证码</span>
                <CountDown v-else :time='time' @finish='onFinish'>
                    <template #default='timeData'>
                        <span>{{timeData.seconds}}秒</span>
                    </template>
                </CountDown>
            </template>
        </ Filed>
    </template>
    <script>
    import { CountDown. Filed, Toast } from 'vant'
        export default {
            data() {
                return {
                    sendCode: false,
                    info: {
                        captcha: ''
                    }
                }
            },
            methods: {
                send() {
                    // 调接口拿到验证码
                    const params = {
                        activityId: 'xxx',
                        phone: cmdRSAEncrypt(phone) // 将手机号进行加密
                    },
                    // 调用后端接口
                    sendSmsToc(params).then(res => {
                        if(res.code === '0') {
                            this.sendCode = true
                        } else {
                            Toast.fail(res.error)
                        }
                    })
                },
                onFinish() {
                    this.sendCode = false
                }
            }
        }
    </script>

cmdRSAEncrypt是我们封装的一个加密方法通过RSA加密

// 先下载 jsencrypt
// npm i jsencrypt -S
import { JSEncrypt } from 'jsencrypt'

// RSA加密
export function cmdRSAEncrypt(str) {
    const Encrypt = new JSEncrypt()
    Encrypt.setPublicKey(这里是公钥)
    return Encrypt.encrypt(str)
}

// RSA解密
export function cmdRSADecrypt(str) {
    const Decrypt = new JSEncrypt()
    Decrypt.setPrivateKey(这里是私钥)
}

如何获取到公钥 和 私钥

1 在终端中输入 openssl genrsa -out private.pem 1024 即可生成一个private.pem文件，该文件中内容就是私钥
2 在终端中输入 openssl rsa -in private.pem -pubout -out public.pem 即可生成一个 public.pem文件, 该文件中内容就是公钥
3 以上命令我是在vscode内置终端打开的的, 当然你也可以直接在终端通过输入 cat private.pem 在终端查看私钥 或则 cat public.pem查看公钥

目前的应用场景主要是涉及隐私的时候，用公钥对密码进行加密，再去传给后台，后台用私钥对加密的内容进行解密，然后进行校验或者保存到数据库。