前端登录随机数字字母组合验证

背景：系统登录页面只有用户名密码一种校验方式，没有验证码，可能导致暴力破解。
实现逻辑：

 <el-form-item prop="code">
        <el-input
          v-model="loginForm.captchaCode"
          auto-complete="off"
          placeholder="验证码"
          style="width: 67%">
          <base-icon slot="prefix" icon-class="shield-check-fill"></base-icon>
        </el-input>
        <div class="login-code">
          <img :src="codeUrl" @click="getImgCode" class="login-code-img"/>
        </div>
      </el-form-item>

 data() {
    return {
     loginForm: {
        // 用户名
        username: '',
        // 密码
        password: '',
        // 是否记住密码
        remember: false,
        //验证码
        captchaCode:'',
        //验证码id
        captchaId:'',
      },
      //验证码图片
      codeUrl: '',
    }
    }

接口返回code码或者转成base64返回 这里采用的是后端返回base64，前台展示图片

created() {
    this.getImgCode()
  },
  methods: {
     //获取验证码
    getImgCode() {
      captchaNum().then(res => {
        this.codeUrl = res.code
        this.loginForm.captchaId = res.id
      });
    },
    }

 // 登录提交
    submitForm() {
      const that = this
      that.$refs.loginFormRef.validate((valid) => {
        if (valid) {
          if (!that.loginForm.captchaCode) {
            this.$message({ message: "请输入验证码!", type: "warning" });
          }
          else{
            const loginFormValue = { ...that.loginForm }
            //loginFormValue.password = encrypt(loginFormValue.password)
            if (loginFormValue.remember) {
              if (getPassword() == loginFormValue.password) {
                if (decrypt(loginFormValue.password) == '') {
                  loginFormValue.password = encrypt(loginFormValue.password);
                }
              } else {
                loginFormValue.password = encrypt(loginFormValue.password)
              }
            } else {
              if (decrypt(loginFormValue.password) == '') {
                loginFormValue.password = encrypt(loginFormValue.password);
              }
            }
            loginFormValue.appCode = that.currentAppCode
            // 校验成功，进行登录
            that.handleLogin(loginFormValue)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },```
    实现效果如下
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/4a4dfe7240af49339846bbea56b2256d.png)