您的位置:首页 > 房产 > 建筑 > 登录失败时刷新验证码

登录失败时刷新验证码

2024/10/6 8:30:20 来源:https://blog.csdn.net/cqjnovo/article/details/141500776  浏览:    关键词:登录失败时刷新验证码

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

当点击登录按钮时,会向后端提交用户输入的用户名、密码、验证码等信息,经过后端的校验后,后端会返回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}})},})

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com