fix(hjc-web): 修复刷新后登录态丢一半,以及顶栏企业名取错字段
- useHjcAuth:登录用户信息补持久化到 hjc_user cookie。原先用 useState,只活在内存与 本次 SSR payload 里,刷新后归 null,顶栏企业名退化成占位的「企业」,登录态看着像丢了 一半;H5 端把用户信息存本地存储,PC 端用同名 cookie 对齐。它**只用于展示**,鉴权一律 以 JWT 为准(后端不读用户信息)。顺带抽出 setCredentials() 统一写入 token + 展示信息。 - HjcUserBar:loggedIn 改 computed —— 原来 ref(isLoggedIn()) 只在挂载那一刻求值一次, 之后别处清凭据(401 处理、另一页签退出)本组件不跟着变;企业名改取 username 而非 nickname —— 核心实例建号时会把 nickname 无条件覆盖成打码手机号,拿它当企业名是错的, username 才是「企业名称(登录账号)」。 - login:验证码图 object-cover 改 object-contain,避免被裁掉。 - tender/orders:改用 useRequestFetch()。SSR 期间裸 $fetch 不会把浏览器 Cookie 转发给 站内 /api 代理,代理会变成匿名调用并返回 code=401,从而被 401 分支误判为「凭据失效」 ——刷新页面等于把用户登出。
This commit is contained in:
+1
-1
@@ -25,7 +25,7 @@
|
||||
:src="captchaImage"
|
||||
alt="图形验证码"
|
||||
title="看不清?点击换一张"
|
||||
class="h-[38px] w-28 shrink-0 cursor-pointer rounded-md border border-gray-300 object-cover"
|
||||
class="h-[38px] w-28 shrink-0 cursor-pointer rounded-md border border-gray-300 object-contain"
|
||||
@click="refreshCaptcha"
|
||||
/>
|
||||
<button
|
||||
|
||||
@@ -35,6 +35,19 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
const { isLoggedIn, handleAuthCode } = useHjcAuth()
|
||||
/**
|
||||
* 必须用 useRequestFetch 取数,不能用裸 `$fetch`。
|
||||
*
|
||||
* 下面这句在 **SSR 期间** 就会执行:裸 `$fetch` 走的是 Nuxt 全局 ofetch,服务端渲染时
|
||||
* **不会**把浏览器请求里的 Cookie 转发给站内 `/api` 代理(Nuxt 只在 `useRequestFetch`
|
||||
* / `useFetch` 里做转发)。代理拿不到 `hjc_token` 就等于匿名调用,后端按契约返回
|
||||
* `code=401`;`handleAuthCode` 据此判定「凭据失效」→ 在服务端清 Token →
|
||||
* SSR 响应带上 `Set-Cookie: hjc_token=; Max-Age=0` 并跳登录页。
|
||||
* 结果就是:刷新「我的订单」= 把自己登出(Cookie 被真正删掉,此后一直是未登录)。
|
||||
*
|
||||
* 客户端侧 `useRequestFetch()` 等价于 `globalThis.$fetch`,行为不变。
|
||||
*/
|
||||
const requestFetch = useRequestFetch()
|
||||
const loggedIn = ref(false)
|
||||
const orders = shallowRef<any[]>([])
|
||||
const loaded = ref(false)
|
||||
@@ -58,7 +71,7 @@ function payStatusClass(s?: number) {
|
||||
loggedIn.value = isLoggedIn()
|
||||
if (loggedIn.value) {
|
||||
// 代理原样透传 ApiResult:按 body.code 判定(HTTP 状态码恒为 200,不可用于判定)
|
||||
const res: any = await $fetch('/api/tender/my-orders')
|
||||
const res: any = await requestFetch('/api/tender/my-orders')
|
||||
const auth = await handleAuthCode(res, '/tender/orders')
|
||||
if (auth.handled) {
|
||||
// 401 已清凭据并跳登录页;403 只提示「没有访问权限」,不清 token
|
||||
|
||||
Reference in New Issue
Block a user