feat(tender): 登录加图形验证码、注册加短信验证码;改按 body.code 判定 401/403

- 新增 captcha / sms / logout 三个 Nuxt server 代理
- 修复代理把 ApiResult 拍扁成 data 的问题(my-orders、enterprise、order、pay、
  mark-paid):登录态失败被前端当成「没有订单 / 未提交资质」,无法区分
- 新增 handleAuthCode 统一处理:401 → 清凭据并跳 /login?redirect=…;
  403 → 只提示「没有访问权限」,不清 token、不跳登录页
- 登录页与注册页分别接入图形验证码与短信验证码(含 60s 倒计时)
- 修复回跳开放重定向:redirect 参数安全解码且只接受站内路径
  (拒绝 //evil.com、https://… 及反斜杠变体 /\evil.com)
- 下单成功但发起支付失败时停在支付步,避免用户重提交产生重复订单
This commit is contained in:
2026-09-10 23:44:19 +08:00
parent 5e7372d0c7
commit d0c2dd17cb
15 changed files with 485 additions and 49 deletions
+80 -3
View File
@@ -11,6 +11,33 @@
<label class="text-sm text-gray-600">密码</label>
<input v-model="password" type="password" class="mt-1 w-full rounded-md border border-gray-300 px-4 py-2 text-sm" placeholder="请输入密码" />
</div>
<div>
<label class="text-sm text-gray-600">图形验证码</label>
<div class="mt-1 flex items-center gap-2">
<input
v-model="code"
class="w-full rounded-md border border-gray-300 px-4 py-2 text-sm"
placeholder="请输入图片中的验证码"
autocomplete="off"
/>
<img
v-if="captchaImage"
:src="captchaImage"
alt="图形验证码"
title="看不清?点击换一张"
class="h-[38px] w-28 shrink-0 cursor-pointer rounded-md border border-gray-300 object-cover"
@click="refreshCaptcha"
/>
<button
v-else
type="button"
class="h-[38px] w-28 shrink-0 rounded-md border border-gray-300 text-xs text-gray-600 hover:bg-gray-50"
@click="refreshCaptcha"
>
获取验证码
</button>
</div>
</div>
<button type="submit" class="w-full rounded-md bg-blue-600 py-3 text-white font-medium hover:bg-blue-700 disabled:opacity-50" :disabled="loading">
{{ loading ? '登录中...' : '登录' }}
</button>
@@ -25,22 +52,72 @@
</template>
<script setup lang="ts">
const { login } = useHjcAuth()
const { login, fetchCaptcha } = useHjcAuth()
const route = useRoute()
const enterpriseName = ref('')
const password = ref('')
/** 图形验证码(后端只下发图片,答案由用户肉眼识别后输入) */
const code = ref('')
const captchaImage = ref('')
const loading = ref(false)
const error = ref('')
/** 拉取/刷新图形验证码图片;失败时提示并允许点击重试 */
async function refreshCaptcha() {
code.value = ''
const res = await fetchCaptcha()
if (res.ok && res.image) {
captchaImage.value = res.image
return
}
captchaImage.value = ''
// 不覆盖已有错误(如登录失败 message),仅在无错误时提示验证码本身的问题
if (!error.value) error.value = res.message || '验证码获取失败,请点击重试'
}
/**
* 登录成功后的去向:`redirect` 可能被 encodeURIComponent 过(如 /buy%3Fid%3D3),
* 这里安全解码;仅接受站内路径,避免开放重定向。
*/
function resolveRedirect() {
const raw = (route.query.redirect as string) || ''
if (!raw) return '/tender'
let target = raw
try {
target = decodeURIComponent(raw)
} catch {
target = raw
}
// 必须以单个 '/' 开头:排除 http(s)://、协议相对地址 //evil.com
// 以及反斜杠变体 /\evil.com(部分浏览器把 '\' 归一成 '/',等价于 //evil.com
return target.startsWith('/') && !target.startsWith('//') && !target.includes('\\') ? target : '/tender'
}
onMounted(refreshCaptcha)
async function submitForm() {
error.value = ''
if (!enterpriseName.value.trim()) {
error.value = '请输入企业名称'
return
}
if (!password.value) {
error.value = '请输入密码'
return
}
if (!code.value.trim()) {
error.value = '请输入图形验证码'
return
}
loading.value = true
try {
const res = await login(enterpriseName.value, password.value)
const res = await login(enterpriseName.value.trim(), password.value, code.value.trim())
if (res.ok) {
return navigateTo((route.query.redirect as string) || '/tender')
return navigateTo(resolveRedirect())
}
error.value = res.message || '登录失败'
// 验证码一次性,失败后换一张,避免用户用同一个码反复提交
await refreshCaptcha()
} catch (e: any) {
error.value = e?.message || '登录失败'
} finally {