登录失败时刷新验证码

需求:当因为用户的输入存在错误,导致登录不成功时,需要重新换一张验证码

当点击登录按钮时,会向后端提交用户输入的用户名、密码、验证码等信息,经过后端的校验后,后端会返回code和message以及data等信息,如果返回的code=200就说明登录成功,否则登录失败,在前端显示错误的原因,并且添加state.refreshCaptcha(),更换一张验证码

javascript 复制代码
const state = reactive({
      model: {
        userName: 'admin',
        password: '111111',
        captcha: '',      // 用户输入的验证码
        codeKey: ''       // 后端返回的验证码key
      },
      rules: getRules(),
      loading: false,
      captchaSrc: "" ,
      refreshCaptcha: async () => {
          const { data } = await GetValidateCode() ;
          state.model.codeKey = data.codeKey
          state.captchaSrc = data.codeValue
      },
      btnText: computed(() =>
        state.loading ? ctx.$t('login.logining') : ctx.$t('login.login')
      ),
      loginForm: ref(null),
      submit: () => {
        if (state.loading) {
          return
        }
        state.loginForm.validate(async valid => {
          if (valid) {
            state.loading = true
            const { code, data, message } = await Login(state.model)
            if (+code === 200) {
              ctx.$message.success({
                message: ctx.$t('login.loginsuccess'),
                duration: 1000,
              })

              const targetPath = decodeURIComponent(route.query.redirect)
              if (targetPath.startsWith('http')) {
                // 如果是一个url地址
                window.location.href = targetPath
              } else if (targetPath.startsWith('/')) {
                // 如果是内部路由地址
                router.push(targetPath)
              } else {
                router.push('/')    // 请求成功以后,进入到首页
              }
              useApp().initToken(data)
            } else {
              //登录失败 重新刷新验证码
              state.refreshCaptcha()
              ctx.$message.error(message)
            }
            state.loading = false
          }
        })
      },
    })
相关推荐
滑雪的企鹅.19 分钟前
HTML头部元信息避坑指南大纲
前端·html
一拳不是超人22 分钟前
老婆天天吵吵要买塔罗牌,我直接用 AI 2 小时写了个在线塔罗牌
前端·ai编程
曹牧35 分钟前
Spring:@RequestMapping注解,匹配的顺序与上下文无关
java·后端·spring
daixin884837 分钟前
cursor无法正常使用gpt5.5等模型解决方案
java·redis·cursor
韦禾水1 小时前
记录一次项目部署到tomcat的异常
java·tomcat
曦月合一2 小时前
树莓派安装jdk、tomcat、vnc、谷歌浏览器开机自启等环境配置
java·tomcat·树莓派
excel2 小时前
如何解决 Nuxt DevTools 中关于 unstorage 包的报错
前端
Rust研习社2 小时前
使用 Axum 构建高性能异步 Web 服务
开发语言·前端·网络·后端·http·rust
此剑之势丶愈斩愈烈2 小时前
openssl 自建证书
java
面汤放盐2 小时前
何时使用以及何时不应使用微服务:没有银弹
java·运维·云计算