weicw1996
32098b69ac
- 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 分支误判为「凭据失效」 ——刷新页面等于把用户登出。
40 lines
1.6 KiB
Vue
40 lines
1.6 KiB
Vue
<template>
|
|
<div class="flex items-center gap-4 text-sm">
|
|
<template v-if="loggedIn">
|
|
<span class="text-gray-500">{{ displayName }}</span>
|
|
<NuxtLink to="/tender/orders" class="text-blue-600 hover:underline">我的订单</NuxtLink>
|
|
<NuxtLink to="/tender/qualification" class="text-blue-600 hover:underline">企业资质</NuxtLink>
|
|
<button class="text-gray-500 hover:text-red-600" @click="doLogout">退出</button>
|
|
</template>
|
|
<template v-else>
|
|
<NuxtLink to="/login" class="text-blue-600 hover:underline">登录</NuxtLink>
|
|
<NuxtLink to="/register" class="text-blue-600 hover:underline">企业注册</NuxtLink>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { isLoggedIn, user, logout } = useHjcAuth()
|
|
|
|
/**
|
|
* 写成 computed 而不是 `ref(isLoggedIn())`：后者只在组件挂载那一刻求值一次，
|
|
* 之后别处清掉凭据（如 401 处理、另一个页签退出）本组件不会跟着变。
|
|
*/
|
|
const loggedIn = computed(() => isLoggedIn())
|
|
|
|
/**
|
|
* 显示企业名称，取 `username` 而非 `nickname`。
|
|
*
|
|
* 核心实例建号时会把 `nickname` **无条件覆盖**成打码手机号（`155****2748`，见
|
|
* `.scratch/hjc-auth/spec.md` 的 Q16 = G-a），拿它当企业名显示是错的；
|
|
* 而 `username` 就是「企业名称（登录账号）」，注册后不可变更，也是 `hjc_enterprise.name` 的值。
|
|
*/
|
|
const displayName = computed(() => user.value?.username || user.value?.nickname || '企业')
|
|
|
|
async function doLogout() {
|
|
// logout() 会先通知后端（无服务端会话），再清本地凭据
|
|
await logout()
|
|
return navigateTo('/tender')
|
|
}
|
|
</script>
|