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

 <el-form-item prop="code"><el-inputv-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:'',//验证码idcaptchaId:'',},//验证码图片codeUrl: '',}}

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

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

 // 登录提交submitForm() {const that = thisthat.$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)