当前位置: 首页 > news >正文

登录失败时刷新验证码

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

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

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.codeKeystate.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 = trueconst { 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}})},})


http://www.mrgr.cn/news/13360.html

相关文章:

  • Avalonia与WPF开发时的差异总结
  • C语言基础(十二)
  • 美国短剧APP借力Facebook广告引流核心优势攻略
  • const、inline、nullptr的使用
  • Spring框架 基础介绍
  • SpringBoot核心配置文件(SpringBoot学习3)
  • 结合令牌(JWT)和签名认证的系统登录及页面访问的详细实现原理和流程
  • APP渠道来源方案探索
  • Docker培训
  • 【MySQL进阶之路】事务的隔离级别
  • 优秀的开源项目
  • MyBatis缓存机制 ▎特殊符号处理
  • 经验笔记:基于Token的身份认证及其安全性探讨
  • Elasticsearch搜索引擎
  • C语言 | Leetcode C语言题解之第374题猜数字大小
  • JWT令牌本身已包含签名,访问资源的时候为什么还需要签名认证?
  • Verilog刷题笔记60
  • 【Log Storage】SLS 技术分析
  • 【百日算法计划】:每日一题,见证成长(003)
  • 数学建模----线性回归分析(引入热力图的绘制方法)