登录失败时刷新验证码

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

当点击登录按钮时,会向后端提交用户输入的用户名、密码、验证码等信息,经过后端的校验后,后端会返回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
          }
        })
      },
    })
相关推荐
Surplusx1 分钟前
运用VS Code前端开发工具完成网页头部导航栏
前端·html
sheji34166 分钟前
【开题答辩全过程】以 基于Java的智慧环卫垃圾收运管理系统设计与实现为例,包含答辩的问题和答案
java·开发语言
jason成都14 分钟前
实战 | 国产数据库 R2DBC-JDBC 桥接踩坑记 - JetLinks适配达梦数据库
java·数据库·物联网
BullSmall19 分钟前
SEDA (Staged Event-Driven Architecture, 分阶段事件驱动架构
java·spring·架构
小宇的天下22 分钟前
Calibre 3Dstack --每日一个命令day13【enclosure】(3-13)
服务器·前端·数据库
Coder_Boy_1 小时前
基于SpringAI的在线考试系统-DDD(领域驱动设计)核心概念及落地架构全总结(含事件驱动协同逻辑)
java·人工智能·spring boot·微服务·架构·事件驱动·领域驱动
黎雁·泠崖1 小时前
Java&C语法对比:分支与循环结构核心全解析
java·c语言
鹿角片ljp1 小时前
Java IO流案例:使用缓冲流恢复《出师表》文章顺序
java·开发语言·windows
毕设源码-郭学长1 小时前
【开题答辩全过程】以 广告投放管理系统为例,包含答辩的问题和答案
java
一只小bit1 小时前
Qt 文件:QFile 文件读写与管理教程
前端·c++·qt·gui