tp6+vue实现非对称加密登录

vue安装下载jsencrypt(使用npm i -S jsencrypt安装会报错，只能使用cnpm安装)

cnpm i -S jsencrypt

npm安装

npm install jsencrypt

<script src="http://passport.cnblogs.com/scripts/jsencrypt.min.js"></script>

vue

<template>
<el-form :model="ruleForm"
                    ref="ruleForm" 
                    label-width="0" 
                    class="login-page">
                        <el-form-item prop="user_name">
                            <el-input type="text" 
                                v-model="ruleForm.user_name"
                                autocomplete="on" 
                                placeholder="用户名"
                                maxlength="50"
                                size="large"
                                @keydown.enter.native="login"
                            ></el-input>
                        </el-form-item>

                        <el-form-item prop="user_password">
                            <el-input type="password" 
                                v-model="ruleForm.user_password"
                                autocomplete="on" 
                                placeholder="登录密码"
                                maxlength="50"
                                size="large"
                                @keydown.enter.native="login"
                            ></el-input>
                        </el-form-item>

                        <el-form-item prop="vcode" class="vcode_box">
                            <el-input
                                v-model="ruleForm.vcode"
                                placeholder="验证码"
                                autocomplete="off"
                                maxlength="4"
                                style="width: 200px;"
                                size="large"
                                @keydown.enter.native="login"
                            ></el-input>
                            <div class="vcode" title="点击重新生成验证码">
                                <img @click="refreshCode" :src="imgCode" alt="验证码">
                            </div>
                        </el-form-item>

                        <el-button class="login_btn" @click="login" >登录</el-button>
                    </el-form>
</template>
<script>
import { JSEncrypt } from "jsencrypt";
export default{
	data() {
        return {
            ruleForm: {
                user_name: '',
                user_password: '',
                code: ''
            },
            imgCode: '验证码地址',
            publicKey: ''
        }
    },
    methods: {
    	// 获取公钥
		async getPublicKey(){
            const {data:res} = await this.$axios.get("getSecretkey");
            if(res.state){
                this.publicKey = res.content;
            }else{
                this.$message.error("网络错误，请稍后重试！");   
            }
        },
        // 点击登录
        login(){
			// ... 验证用户名、密码、验证码是否输入
			let formData = this.ruleForm;
			let encryptor = new JSEncrypt();
            encryptor.setPublicKey(this.publicKey);
            // 将用户名和密码加密处理
            let data_encrypted = encryptor.encrypt(formData.user_name+','+formData.user_password);
            var datas = {};
            datas.code = formData.code;
            datas.logininfo = data_encrypted;
            this.$axios.post('login', datas).then(res => {
				console.log(res)
			});
		}
	}
}
</script>

php

安装openssl扩展
小P(phpstudy)：打开小p工具 -> 网站 -> localhost（管理）-> php扩展找到openssl并打开
原生php：打开php.ini文件，搜索extension=openssl，将前面的;删除，保存重启服务

public function getSecretkey(){
        // 检测今天生成的密钥文件是否存在，不存在则生成
        if( file_exists("./secretKey/".date('Ymd', time()).'_publicKey.pem' )){
            // 读取该文件
            $public_key = file_get_contents("./secretKey/".date("Ymd", time())."_publicKey.pem");
            return $public_key;
        }else{
            # 1.清空目录中非当天生成的加密文件
            if(is_dir("./secretKey")){
                $dirs = scandir("./secretKey"); // 获取该目录下所有目录及文件
                foreach($dirs as $file){
                    if($file != '.' && $file != '..'){
                        $sonFile = "./secretKey/".$file;
                        @unlink($sonFile);
                    }
                }
            }
            # 2.生成文件
            $config = array(
                'config' => 'D:\phpstudy_pro\Extensions\Apache2.4.39\conf\openssl.cnf',//安装PHP7会自带这个配置文件
                "digest_alg" => "sha512",
                "private_key_bits" => 1024,
                "private_key_type" => OPENSSL_KEYTYPE_RSA,   //加密类型
              );
            $res = openssl_pkey_new($config);
            //提取私钥
            openssl_pkey_export($res, $private_key, null,$config);
            //生成公钥
            $public_key = openssl_pkey_get_details($res);
            $public_key=$public_key["key"];
            file_put_contents("./secretKey/".date('Ymd', time())."_publicKey.pem", $public_key); // 生成公钥
            file_put_contents("./secretKey/".date('Ymd', time())."_privateKey.pem", $private_key); // 生成私钥
            return $public_key;

        }
    }

public function login(){
	$data = input('post.');
    // 使用密钥进行解密获取数据
    $privateKey = file_get_contents("./secretKey/".date('Ymd', time())."_privateKey.pem");
    if(!openssl_private_decrypt(base64_decode($data['logininfo']), $decrypted, $privateKey)){
        return show(false, '501.非法请求');
    }
    $login_info = explode(",", $decrypted);
    // 用户名、密码、验证码验证
    $res = $this->check_login($login_info[0], $login_info[1], $data['code']);
    if($res){
		return '登陆成功';
	}else{
		return '登录失败';
	}
    
}