From 41487b9a8ad1353c21dd1ac2bfafcf8d1d4f34e4 Mon Sep 17 00:00:00 2001
From: xyc <jc_xiong@hotmail.com>
Date: 星期五, 28 八月 2026 17:09:47 +0800
Subject: [PATCH] feat: 所有前端 API 请求加超时保护，超时/网络异常优雅提示，不再无限 pending
---
traffic-audit-web/src/views/Login.vue | 143 +++++++++++++++++++++++------------------------
1 files changed, 71 insertions(+), 72 deletions(-)
diff --git a/traffic-audit-web/src/views/Login.vue b/traffic-audit-web/src/views/Login.vue
index e081d22..f7dc1a7 100644
--- a/traffic-audit-web/src/views/Login.vue
+++ b/traffic-audit-web/src/views/Login.vue
@@ -9,107 +9,106 @@
<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>
- <div class="captcha-wrap" v-loading="captchaLoading">
- <shape-captcha v-if="captcha.shapes.length"
- :shapes="captcha.shapes"
- :instruction="captcha.instruction"
- @complete="onCaptchaComplete"
- @refresh="loadCaptcha"
- @reset="onCaptchaReset"></shape-captcha>
- <div v-else class="captcha-empty">姝ｅ湪鍔犺浇楠岃瘉鐮佲��</div>
- </div>
+ <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" @click="login" :loading="loading" style="width:100%">鐧� 褰�</el-button>
+ <el-button type="primary" :loading="loggingIn" @click="login" style="width:100%">鐧� 褰�</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</template>
<script>
-import api from '@/api'
-import ShapeCaptcha from '@/components/ShapeCaptcha.vue'
+import axios from 'axios'
+import Captcha3D from '@/components/Captcha3D.vue'
+
export default {
name: 'Login',
- components: { ShapeCaptcha },
+ components: { Captcha3D },
data() {
return {
form: { username: '', password: '' },
- loading: false,
- captchaLoading: false,
- captcha: { captchaId: '', shapes: [], instruction: '' },
- seq: [],
rules: {
username: [{ required: true, message: '璇疯緭鍏ョ敤鎴峰悕', trigger: 'blur' }],
password: [{ required: true, message: '璇疯緭鍏ュ瘑鐮�', trigger: 'blur' }]
- }
+ },
+ captchaVerified: false,
+ captchaId: '',
+ clickIds: [],
+ loggingIn: false,
+ captchaRequired: true
}
},
- created() { this.loadCaptcha() },
+ 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: {
- loadCaptcha() {
- this.captchaLoading = true
- this.seq = []
- this.captcha = { captchaId: '', shapes: [], instruction: '' }
- api.get('/captcha/shape')
- .then(res => {
- const d = res && res.data
- if (!d || !d.captchaId) { this.$message.error((res && res.message) || '楠岃瘉鐮佸姞杞藉け璐�'); return }
- this.captcha = d
- })
- .catch(err => {
- const d = err && err.response && err.response.data
- this.$message.error((d && d.message) || '楠岃瘉鐮佸姞杞藉け璐ワ紝璇风◢鍚庨噸璇�')
- })
- .finally(() => { this.captchaLoading = false })
+ onCaptchaVerified(payload) {
+ this.captchaVerified = true
+ this.captchaId = payload.captchaId
+ this.clickIds = payload.clickIds
},
- onCaptchaComplete(sequence) { this.seq = sequence || [] },
- onCaptchaReset() { this.seq = [] },
+ onCaptchaReset() {
+ this.captchaVerified = false
+ this.captchaId = ''
+ this.clickIds = []
+ },
login() {
this.$refs.form.validate(valid => {
if (!valid) return
- if (!this.captcha.captchaId) { this.$message.warning('楠岃瘉鐮佸姞杞戒腑锛岃绋嶅��'); return }
- if (!this.seq || this.seq.length < this.captcha.total) {
- this.$message.warning('璇峰厛鎸夋彁绀洪『搴忕偣鍑婚獙璇佺爜鍥惧舰')
+ if (this.captchaRequired && !this.captchaVerified) {
+ this.$message.warning('璇峰厛瀹屾垚琛屼负楠岃瘉')
return
}
- this.loading = true
- api.post('/captcha/verify', { captchaId: this.captcha.captchaId, sequence: this.seq })
- .then(res => {
- if (!res || res.code !== 200) {
- this.$message.error((res && res.message) || '楠岃瘉鐮佹牎楠屽け璐�')
- this.loadCaptcha()
- return
- }
- return api.post('/auth/login', this.form)
- })
- .then(res => {
- if (!res) return
- const d = res.data
- if (!d || !d.token) { this.$message.error((res && res.message) || '鐧诲綍澶辫触'); return }
- localStorage.setItem('token', d.token)
- localStorage.setItem('username', d.username || '')
- localStorage.setItem('realName', d.realName || '')
- localStorage.setItem('modules', d.modules || '')
- this.$message.success('娆㈣繋锛�' + (d.realName || d.username))
+ this.loggingIn = true
+ axios.post('/api/auth/login', {
+ username: this.form.username,
+ password: this.form.password,
+ captchaId: this.captchaId,
+ captchaClickIds: this.clickIds
+ }, { 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)
+ localStorage.setItem('realName', d.data.realName || '')
+ localStorage.setItem('modules', d.data.modules || '')
+ this.$message.success('鐧诲綍鎴愬姛')
this.$router.push('/dashboard')
- })
- .catch(err => {
- const d = err && err.response && err.response.data
- this.$message.error((d && d.message) || '鐧诲綍澶辫触锛氳妫�鏌ョ敤鎴峰悕鎴栧瘑鐮�')
- this.loadCaptcha()
- })
- .finally(() => { this.loading = false })
+ } else if (d.code === 401) {
+ this.$message.error(d.message || '鐢ㄦ埛鍚嶆垨瀵嗙爜閿欒')
+ if (this.$refs.captcha) this.$refs.captcha.load()
+ } else if (d.code === 4001 || d.code === 4002 || d.code === 4003) {
+ this.$message.error(d.message || '楠岃瘉鏈�氳繃锛岃閲嶆柊楠岃瘉')
+ if (this.$refs.captcha) this.$refs.captcha.load()
+ } else {
+ this.$message.error(d.message || '鐧诲綍澶辫触锛岃閲嶈瘯')
+ if (this.$refs.captcha) this.$refs.captcha.load()
+ }
+ }).catch(e => {
+ this.loggingIn = false
+ if (e && e.code === 'ECONNABORTED') { this.$message.error('鐧诲綍璇锋眰瓒呮椂锛岃閲嶈瘯'); return }
+ this.$message.error('缃戠粶閿欒锛岀櫥褰曞け璐�')
+ })
})
}
}
}
</script>
<style scoped>
-.login-container { display: flex; justify-content: center; align-items: center; height: 100vh; background: #f0f2f5; }
-.login-card { width: 420px; }
-.login-card h2 { text-align: center; margin-bottom: 20px; }
-.captcha-wrap { min-height: 168px; }
-.captcha-empty { display: flex; justify-content: center; align-items: center; height: 168px; color: #909399; font-size: 13px; }
-</style>
\ No newline at end of file
+.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; }
+</style>
--
Gitblit v1.9.1