xyc
2 天以前 bd4e71203152cdb31ecb939c6113e9db78d1d767
traffic-audit-web/src/views/Login.vue
@@ -1,7 +1,7 @@
<template>
  <div class="login-container">
    <el-card class="login-card">
      <h2>交通统计报表审核系统</h2>
      <h2>交通统计报表审核系统<span class="login-version" v-if="version">V{{ version }}</span></h2>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item prop="username">
          <el-input v-model="form.username" placeholder="用户名" @keyup.enter.native="login"></el-input>
@@ -40,16 +40,27 @@
      captchaId: '',
      clickIds: [],
      loggingIn: false,
      captchaRequired: true
      captchaRequired: false,
      version: ''
    }
  },
  created() {
    axios.get('/api/version', { timeout: 10000 })
      .then(res => {
        const d = res.data
        if (d && d.data && d.data.version) this.version = d.data.version
      })
      .catch(() => {})
    // 验证码是否启用一律以后端 /api/auth/captcha-config 为准:
    // 默认不显示,只有后端明确返回 required=true 才渲染验证码组件。
    // 修复:此前默认 true 且请求失败时静默忽略,切换网络后该配置读不到,
    // 登录页就会残留一个加载不出来的验证码白框并提示“验证码加载失败,请检查网络”。
    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
        this.captchaRequired = !!(d && d.code === 200 && d.data && d.data.required === true)
      })
      .catch(() => {})
      .catch(() => { this.captchaRequired = false })
  },
  methods: {
    onCaptchaVerified(payload) {
@@ -110,5 +121,6 @@
.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-version { font-size: 13px; font-weight: normal; color: #909399; margin-left: 8px; vertical-align: 3px; }
.login-card .el-form-item { margin-bottom: 16px; }
</style>