简述前后端项目RSA+AES加解密

一、登录机制

　　在项目中，我们可以大致得出一个登录的过程，主要分为  登录验证、登录保持、退出三个部分。登录验证是指客户端提供用户名和密码，向服务器提出登录请求，服务器判断客户端是否可以登录并向客户端确认。 登录保持是指客户端登录后， 服务器能够分辨出已登录的客户端，并为其持续提供登录权限的服务器。退出是指客户端主动退出登录状态。而登录保持容易想到的方案是，客户端登录成功后， 服务器为其分配sessionId（token）， 客户端随后每次请求资源时都带上sessionId（token）。

       注意：session与token的区别，可阅读以下文章

• https://blog.csdn.net/mydistance/article/details/84545768
• https://www.cnblogs.com/moyand/p/9047978.html

1.1 登录验证

• • 图解

                     

• • 流程
    • 客户端向服务器 第一次 发起登录请求（不传输用户名和密码）；
    • 服务器利用RSA算法产生一对serverRSAPublicKey和serverRSAPrivateKey，并保留serverRSAPrivateKey， 将serverRSAPublicKey发送给客户端；
    • 客户端收到serverRSAPublicKey之后，同样利用RSA算法产生一对clientRSAPublicKey与clientRSAPrivateKey，客户端自己保留clientRSAPrivateKey，并用serverRSAPublicKey对登录的数据以及clientRSAPublicKey进行加密，用加密后的数据 第二次 发出登录请求；
    • 服务器收到加密后的数据，利用保留的serverRSAPrivateKey对密文进行解密，（经过判断，确定用户可以登录之后，生成一个加密字符串Token，）同时生成一对对称的AES密钥，并且利用密文中的clientRSAPublicKey对Token以及aesKey进行加密，将aesKey与Token全部返回给客户端；
    • 客户端收到clientRSAPublicKey加密的aesKey与Token后，利用保留的clientRSAPrivateKey对其进行解密，并将其存储在localStorage中，使客户端每次发送请求headers都携带Token这一字段（基于Token的身份验证是无状态的，并且具有时效性）；
  • 编码
    • HTML(由于目前成功的接口只找到username与password这两个字段的接口，为了方便讲解，先调用一下)

      <template>
        <div class="security-main" style="width: 348px;height: 340px;margin:20px">
          <el-form :model="loginData" :rules="loginRules" ref="loginForm" style="margin-top:20px">
            <el-form-item prop="username">
              <el-input
                id="phoneNumber"
                v-model.trim="loginData.username"
                maxlength="11"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                id="verificationCode"
                style="width: 55%;float:left;"
                maxlength="6"
                v-model.trim="loginData.password"
                placeholder="请输入验证码"
              ></el-input>
              <el-button
                type="primary"
                class="btn-verificationCode"
                style="width: 43%;float: right;padding: 12px 0px;"
              >获取验证码</el-button>
            </el-form-item>
            <el-form-item>
              <el-button :disabled="loginBtnDisabled" type="primary" @click="submitForm('loginForm')">
                <i class="el-icon-loading" v-if="isLogining"></i>登录
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <script>
      import { loginData, loginRules } from "../js/login/data";
      import { loginHandler } from "../js/login/bussiness";
      const _loginData = _.cloneDeep(loginData);
      export default {
        name: "security",
        data() {
          return {
            loginData, //登录的表单数据
            loginRules, //登录表单的校验规则
            loginBtnDisabled: false, //登录button是否禁用
            isLogining: false, //是否登录中
            serverRSAPublicKey: "", //服务端rsa公钥
            clientRSAPublicKey: "", //客户端rsa公钥
            clientRSAPrivateKey: "" //客户端rsa私钥
          };
        },
        components: {},
        mounted() {
          // console.log(_loginData);
        },
        methods: {
          submitForm(formName) {
            this.$refs[formName].validate(valid => {
              if (valid) {
                this.isLogining = true;
                this.loginBtnDisabled = true;
                loginHandler({ vue: this });
                // this.$refs[formName].resetFields();
              } else {
                return false;
              }
            });
          }
        }
      };
      </script>
      <style lang="scss">
      .security-main {
      }
      </style>
      <style scoped lang="scss">
      .security {
        width: 100%;
        height: 100%;
        &-main {
        }
      }
      </style>

      View Code