需求:当因为用户的输入存在错误,导致登录不成功时,需要重新换一张验证码
当点击登录按钮时,会向后端提交用户输入的用户名、密码、验证码等信息,经过后端的校验后,后端会返回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.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
}
})
},
})