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:
@@ -12,22 +12,46 @@ import type { HjcUser } from '~/types/tender'
|
||||
export const HJC_CODE_UNAUTHORIZED = 401
|
||||
export const HJC_CODE_FORBIDDEN = 403
|
||||
|
||||
/** 登录凭据有效期(秒),token 与随行的展示信息同寿命 */
|
||||
const AUTH_MAX_AGE = 60 * 60 * 24 * 7
|
||||
|
||||
/** 登录态(token 存 cookie,SSR 安全;服务器端代理从 cookie 读取并转发 Authorization) */
|
||||
export function useHjcAuth() {
|
||||
const token = useCookie<string | null>('hjc_token', {
|
||||
maxAge: 60 * 60 * 24 * 7,
|
||||
maxAge: AUTH_MAX_AGE,
|
||||
sameSite: 'lax'
|
||||
})
|
||||
const user = useState<HjcUser | null>('hjc-user', () => null)
|
||||
/**
|
||||
* 展示用登录用户信息,与 token 同寿命地持久化。
|
||||
*
|
||||
* `useState` 只活在内存与本次 SSR payload 里:刷新页面后 `hjc-user` 归 null,
|
||||
* 顶栏的企业名会从登录后的名称退化成占位的「企业」——登录态看着就像丢了一半。
|
||||
* H5 端把用户信息存本地存储(`hjc_user`),PC 端用同名 cookie 对齐这一做法。
|
||||
* 它**只用于展示**,鉴权一律以 JWT 为准(后端不读用户信息)。
|
||||
*/
|
||||
const userCookie = useCookie<HjcUser | null>('hjc_user', {
|
||||
maxAge: AUTH_MAX_AGE,
|
||||
sameSite: 'lax',
|
||||
default: () => null
|
||||
})
|
||||
const user = useState<HjcUser | null>('hjc-user', () => userCookie.value ?? null)
|
||||
|
||||
function isLoggedIn() {
|
||||
return !!token.value
|
||||
}
|
||||
|
||||
/** 写入本次登录/注册拿到的凭据(token + 展示信息),内存与 cookie 一起写 */
|
||||
function setCredentials(accessToken: string, loginUser: HjcUser | null) {
|
||||
token.value = accessToken
|
||||
user.value = loginUser
|
||||
userCookie.value = loginUser
|
||||
}
|
||||
|
||||
/** 清本地凭据(token 是无状态 JWT,后端无会话,清本地即退出) */
|
||||
function clearCredentials() {
|
||||
token.value = null
|
||||
user.value = null
|
||||
userCookie.value = null
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -44,6 +68,11 @@ export function useHjcAuth() {
|
||||
): Promise<{ handled: boolean; message?: string }> {
|
||||
const code = Number(res?.code)
|
||||
if (code === HJC_CODE_UNAUTHORIZED) {
|
||||
// 注意:这一分支会写 cookie(服务端渲染时即 SSR 响应里的 Set-Cookie 清除)。
|
||||
// 因此凡是**服务端渲染期间**发出的、需要登录态的站内请求,必须用
|
||||
// `useRequestFetch()` 而不是裸 `$fetch`——裸 $fetch 不会把浏览器 Cookie 转发给
|
||||
// 站内 /api 代理,代理会变成匿名调用并拿到 code=401,从而被这里误判为
|
||||
// 「凭据失效」:刷新页面 = 把用户登出。参见 app/pages/tender/orders.vue。
|
||||
clearCredentials()
|
||||
await navigateTo(`/login?redirect=${encodeURIComponent(redirect)}`)
|
||||
return { handled: true }
|
||||
@@ -103,8 +132,7 @@ export function useHjcAuth() {
|
||||
})
|
||||
// mp-api 统一返回 ApiResult{code,message,data},code===0 成功
|
||||
if (res?.code === 0 && res.data?.access_token) {
|
||||
token.value = res.data.access_token
|
||||
user.value = res.data.user || null
|
||||
setCredentials(res.data.access_token, res.data.user || null)
|
||||
return { ok: true, user: res.data.user }
|
||||
}
|
||||
return { ok: false, message: res?.message || '登录失败' }
|
||||
@@ -124,8 +152,7 @@ export function useHjcAuth() {
|
||||
body: payload
|
||||
})
|
||||
if (res?.code === 0 && res.data?.access_token) {
|
||||
token.value = res.data.access_token
|
||||
user.value = res.data.user || null
|
||||
setCredentials(res.data.access_token, res.data.user || null)
|
||||
return { ok: true, user: res.data.user }
|
||||
}
|
||||
return { ok: false, message: res?.message || '注册失败' }
|
||||
|
||||
Reference in New Issue
Block a user