docs: 崩溃根因实锤更新——el-tabs 布局无限循环（684da41），sessionStorage 强制登录完成（c62a61c），4 个菜...

xyc

1 天以前 f0597c28b7d722301f2177e3ef46d2ce6e95b102

 traffic-audit-web/src/views/Login.vue

@@ -9,8 +9,11 @@
        <el-form-item prop="password">
          <el-input v-model="form.password" type="password" placeholder="密码" @keyup.enter.native="login"></el-input>
        </el-form-item>
        <el-form-item>
        <el-form-item v-if="captchaRequired">
          <captcha3-d ref="captcha" @verified="onCaptchaVerified" @reset="onCaptchaReset"></captcha3-d>
        </el-form-item>
        <el-form-item v-else>
          <div class="captcha-skip-tip">测试模式：行为验证码已跳过，可直接点击登录（正式发布后将启用）</div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loggingIn" @click="login" style="width:100%">登 录</el-button>
@@ -36,8 +39,17 @@
      captchaVerified: false,
      captchaId: '',
      clickIds: [],
      loggingIn: false
      loggingIn: false,
      captchaRequired: true
    }
  },
  created() {
    axios.get('/api/auth/captcha-config', { timeout: 10000 })
      .then(res => {
        const d = res.data
        if (d && d.code === 200) this.captchaRequired = d.data.required !== false
      })
      .catch(() => {})
  },
  methods: {
    onCaptchaVerified(payload) {
@@ -53,7 +65,7 @@
    login() {
      this.$refs.form.validate(valid => {
        if (!valid) return
        if (!this.captchaVerified) {
        if (this.captchaRequired && !this.captchaVerified) {
          this.$message.warning('请先完成行为验证')
          return
        }
@@ -63,26 +75,29 @@
          password: this.form.password,
          captchaId: this.captchaId,
          captchaClickIds: this.clickIds
        }).then(res => {
        }, { timeout: 15000 }).then(res => {
          this.loggingIn = false
          const d = res.data
          if (d.code === 200) {
            localStorage.setItem('token', d.data.token)
            localStorage.setItem('username', d.data.username)
            sessionStorage.setItem('token', d.data.token)
            sessionStorage.setItem('username', d.data.username)
            sessionStorage.setItem('realName', d.data.realName || '')
            sessionStorage.setItem('modules', d.data.modules || '')
            this.$message.success('登录成功')
            this.$router.push('/dashboard')
          } else if (d.code === 401) {
            this.$message.error(d.message || '用户名或密码错误')
            this.$refs.captcha.load()
            if (this.$refs.captcha) this.$refs.captcha.load()
          } else if (d.code === 4001 || d.code === 4002 || d.code === 4003) {
            this.$message.error(d.message || '验证未通过，请重新验证')
            this.$refs.captcha.load()
            if (this.$refs.captcha) this.$refs.captcha.load()
          } else {
            this.$message.error(d.message || '登录失败，请重试')
            this.$refs.captcha.load()
            if (this.$refs.captcha) this.$refs.captcha.load()
          }
        }).catch(() => {
        }).catch(e => {
          this.loggingIn = false
          if (e && e.code === 'ECONNABORTED') { this.$message.error('登录请求超时，请重试'); return }
          this.$message.error('网络错误，登录失败')
        })
      })
@@ -92,6 +107,7 @@
</script>
<style scoped>
.login-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px 0; box-sizing: border-box; background: #f0f2f5; }
.captcha-skip-tip { font-size: 12px; color: #909399; line-height: 1.6; padding: 8px 10px; background: #F5F7FA; border-radius: 4px; }
.login-card { width: 400px; }
.login-card h2 { text-align: center; margin-bottom: 18px; }
.login-card .el-form-item { margin-bottom: 16px; }