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 {
+92 -2
View File
@@ -12,6 +12,28 @@
show-password
/>
<!-- 短信验证码发到经办人手机号即账号手机号注册接口的 code 用它校验 -->
<div class="space-y-1">
<label class="block text-sm text-gray-600">短信验证码</label>
<div class="flex items-center gap-2">
<input
v-model="smsCode"
class="w-full rounded-md border border-gray-300 px-4 py-2 text-sm"
placeholder="发送至上方填写的经办人手机号"
autocomplete="off"
/>
<button
type="button"
class="h-[38px] w-32 shrink-0 rounded-md border border-gray-300 text-xs text-gray-600 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
:disabled="countdown > 0 || sending"
@click="sendCode"
>
{{ countdown > 0 ? `${countdown} 秒后重发` : sending ? '发送中...' : '发送验证码' }}
</button>
</div>
<p class="text-xs text-gray-400">验证码发到经办人手机号该号码就是登录账号手机号</p>
</div>
<p class="text-center text-xs text-gray-500">
企业联系电话企业地址选填其余项必填提交后等待平台审核审核通过方可购买标书
</p>
@@ -35,12 +57,38 @@
</template>
<script setup lang="ts">
const { register } = useHjcAuth()
const { register, sendSms } = useHjcAuth()
const route = useRoute()
const loading = ref(false)
const error = ref('')
const entForm = ref<any>(null)
/** 短信验证码(注册接口的 code)+ 发送倒计时 */
const smsCode = ref('')
const sending = ref(false)
const countdown = ref(0)
let countdownTimer: ReturnType<typeof setInterval> | null = null
const SMS_COUNTDOWN_SECONDS = 60
/**
* 注册成功后的去向:`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'
}
const form = ref<Record<string, any>>({
name: '',
password: '',
@@ -62,9 +110,49 @@ const materials = ref<any[]>([
{ materialType: 'license', label: '营业执照', materialName: '营业执照', fileUrl: '' }
])
/** 停止倒计时(倒计时结束或页面卸载时调用) */
function stopCountdown() {
if (countdownTimer) {
clearInterval(countdownTimer)
countdownTimer = null
}
countdown.value = 0
}
/** 发送短信验证码到经办人手机号(= 账号手机号) */
async function sendCode() {
error.value = ''
const phone = String(form.value.agentPhone || '').trim()
if (!phone) {
error.value = '请先填写经办人手机号'
return
}
sending.value = true
try {
const res = await sendSms(phone)
if (!res.ok) {
error.value = res.message || '验证码发送失败'
return
}
countdown.value = SMS_COUNTDOWN_SECONDS
countdownTimer = setInterval(() => {
countdown.value -= 1
if (countdown.value <= 0) stopCountdown()
}, 1000)
} finally {
sending.value = false
}
}
onUnmounted(stopCountdown)
async function submitForm() {
error.value = ''
if (!entForm.value?.validate()) return
if (!smsCode.value.trim()) {
error.value = '请输入短信验证码'
return
}
loading.value = true
try {
// buildPayload 返回 { name, ... };注册接口用 enterpriseName 作为登录账号
@@ -72,10 +160,12 @@ async function submitForm() {
const res = await register({
enterpriseName: name,
password: form.value.password,
// code = 短信验证码(登录接口的 code 是图形验证码,两者不同)
code: smsCode.value.trim(),
...rest
})
if (res.ok) {
return navigateTo((route.query.redirect as string) || '/tender')
return navigateTo(resolveRedirect())
}
error.value = res.message || '注册失败'
} catch (e: any) {
+15 -2
View File
@@ -10,6 +10,8 @@
<NuxtLink to="/login?redirect=/tender/orders" class="mt-4 inline-block rounded-md bg-blue-600 px-6 py-2 text-white hover:bg-blue-700">去登录</NuxtLink>
</div>
<div v-else-if="error" class="py-20 text-center text-red-500">{{ error }}</div>
<div v-else-if="orders.length" class="space-y-4">
<div v-for="o in orders" :key="o.id" class="rounded-lg border border-gray-200 p-5">
<div class="flex items-start justify-between">
@@ -32,10 +34,11 @@
</template>
<script setup lang="ts">
const { isLoggedIn } = useHjcAuth()
const { isLoggedIn, handleAuthCode } = useHjcAuth()
const loggedIn = ref(false)
const orders = shallowRef<any[]>([])
const loaded = ref(false)
const error = ref('')
function formatMoney(n?: number | string) {
return Number(n ?? 0).toFixed(2)
@@ -54,8 +57,18 @@ function payStatusClass(s?: number) {
loggedIn.value = isLoggedIn()
if (loggedIn.value) {
// 代理原样透传 ApiResult:按 body.code 判定(HTTP 状态码恒为 200,不可用于判定)
const res: any = await $fetch('/api/tender/my-orders')
orders.value = Array.isArray(res) ? res : []
const auth = await handleAuthCode(res, '/tender/orders')
if (auth.handled) {
// 401 已清凭据并跳登录页;403 只提示「没有访问权限」,不清 token
error.value = auth.message || ''
loggedIn.value = isLoggedIn()
} else if (res?.code === 0) {
orders.value = Array.isArray(res.data) ? res.data : []
} else {
error.value = res?.message || '订单加载失败'
}
loaded.value = true
} else {
loaded.value = true
+23 -5
View File
@@ -47,7 +47,7 @@
</template>
<script setup lang="ts">
const { isLoggedIn } = useHjcAuth()
const { isLoggedIn, handleAuthCode } = useHjcAuth()
const loggedIn = ref(false)
const authStatus = ref(-1)
const rejectReason = ref('')
@@ -88,11 +88,24 @@ const authStatusClass = computed(() => {
const readonly = computed(() => authStatus.value === 0 || authStatus.value === 1)
async function load() {
// 代理原样透传 ApiResult:按 body.code 判定(HTTP 状态码恒为 200,不可用于判定)
const res: any = await $fetch('/api/tender/enterprise')
if (res) {
authStatus.value = res.authStatus ?? -1
rejectReason.value = res.rejectReason || ''
entForm.value?.fill(res)
const auth = await handleAuthCode(res, '/tender/qualification')
if (auth.handled) {
// 401 已清凭据并跳登录页;403 只提示「没有访问权限」,不清 token
error.value = auth.message || ''
loggedIn.value = isLoggedIn()
return
}
if (res?.code !== 0) {
error.value = res?.message || '资质信息加载失败'
return
}
const data = res.data
if (data) {
authStatus.value = data.authStatus ?? -1
rejectReason.value = data.rejectReason || ''
entForm.value?.fill(data)
}
}
@@ -106,6 +119,11 @@ async function submit() {
method: 'POST',
body: entForm.value.buildPayload()
})
const auth = await handleAuthCode(res, '/tender/qualification')
if (auth.handled) {
error.value = auth.message || ''
return
}
if (res?.code !== 0) {
error.value = res?.message || '提交失败'
return