refactor(login): 优化登录页面 MFA 验证逻辑
- 调整 MFA 验证码加载状态管理,提升用户体验 - 移除多余的 catch 块,简化代码结构- 在 mfaConfig 组件中: - 优化二维码显示样式,移除不必要的 fit 属性 - 修正 el-input 组件的 v-model 绑定方式
This commit is contained in:
parent
891eb296b9
commit
26aafce0a3
@ -282,10 +282,11 @@ export default {
|
|||||||
this.$store.dispatch('user/verifyMfaCode', this.loginForm).then(() => {
|
this.$store.dispatch('user/verifyMfaCode', this.loginForm).then(() => {
|
||||||
this.$store.dispatch('user/setMenuList').then(() => {
|
this.$store.dispatch('user/setMenuList').then(() => {
|
||||||
this.$router.push({ path: this.redirect || '/' })
|
this.$router.push({ path: this.redirect || '/' })
|
||||||
this.verifyMfaCodeLoading = false
|
}).finally(() => {
|
||||||
}).catch(() => {
|
|
||||||
this.verifyMfaCodeLoading = false
|
this.verifyMfaCodeLoading = false
|
||||||
})
|
})
|
||||||
|
}).catch(() => {
|
||||||
|
this.verifyMfaCodeLoading = false
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
validUsername() {
|
validUsername() {
|
||||||
|
|||||||
@ -25,8 +25,7 @@
|
|||||||
<template slot="description">
|
<template slot="description">
|
||||||
<div class="description-container">
|
<div class="description-container">
|
||||||
<div class="step-instruction">使用手机应用扫描以下二维码,获取 6 位验证码。</div>
|
<div class="step-instruction">使用手机应用扫描以下二维码,获取 6 位验证码。</div>
|
||||||
<el-image style="width: 150px; height: 150px" :src="mfaSetupResponse.qrCodeImageUri" :fit="cover"
|
<el-image style="width: 150px; height: 150px" :src="mfaSetupResponse.qrCodeImageUri" alt="二维码" />
|
||||||
alt="二维码" />
|
|
||||||
<div class="step-instruction">密钥 :{{ mfaSetupResponse.secret }}
|
<div class="step-instruction">密钥 :{{ mfaSetupResponse.secret }}
|
||||||
<svg-icon
|
<svg-icon
|
||||||
class="copy-btn"
|
class="copy-btn"
|
||||||
@ -43,7 +42,7 @@
|
|||||||
<div class="description-container">
|
<div class="description-container">
|
||||||
<div class="step-instruction">请输入身份验证器 App 生成的 6 位动态验证码,开启两步验证。</div>
|
<div class="step-instruction">请输入身份验证器 App 生成的 6 位动态验证码,开启两步验证。</div>
|
||||||
<div class="step-instruction enable-mfa">
|
<div class="step-instruction enable-mfa">
|
||||||
<el-input placeholder="6位动态验证码" size="small" class="code-input" v-model:value="enableMfaCode"></el-input>
|
<el-input placeholder="6位动态验证码" size="small" class="code-input" v-model="enableMfaCode"></el-input>
|
||||||
<el-button size="small" type="primary" round :disabled="enableMfaCode.length !== 6" @click="enableMFA">开启 2FA</el-button>
|
<el-button size="small" type="primary" round :disabled="enableMfaCode.length !== 6" @click="enableMFA">开启 2FA</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -52,7 +51,7 @@
|
|||||||
</el-steps>
|
</el-steps>
|
||||||
<div v-if="mfaSetupResponse.mfaEnable">
|
<div v-if="mfaSetupResponse.mfaEnable">
|
||||||
<div class="step-instruction enable-mfa">
|
<div class="step-instruction enable-mfa">
|
||||||
<el-input placeholder="6位动态验证码" size="small" class="code-input" v-model:value="disableMfaCode"></el-input>
|
<el-input placeholder="6位动态验证码" size="small" class="code-input" v-model="disableMfaCode"></el-input>
|
||||||
<el-button size="small" type="warning" round :disabled="disableMfaCode.length !== 6" @click="disableMFA">禁用 2FA</el-button>
|
<el-button size="small" type="warning" round :disabled="disableMfaCode.length !== 6" @click="disableMFA">禁用 2FA</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user