james
0ceb4a2b25
Wave 2 of replacing the fixed-data mock adapter: the auth domain joins the live list, so credentials, roles and tokens belong to the real user. - session: validate a restored token through /auth/me instead of trusting localStorage, clearing it on 401/403 but keeping it when the API is merely unreachable; the route guard now uses the validated session - login: report a 401 as invalid credentials rather than a generic failure, and drop the 6-character client rule so the API owns the password policy - register: raise the rule to the API's 8 characters, remove the verification-code field (its button only counted down and the value was never sent), and report a duplicate email (409) distinctly - TopBar and the user profile render their session-dependent branch client-only: validating the session before hydration made those localStorage-backed branches report hydration mismatches the previous code did not Verified against the running backend: wrong password rejected, real JWT issued, /user reachable, a short password refused with no network call, duplicate email reported, a tampered token cleared and bounced to sign-in, a stale token kept when the API is down, and the fixed-data rollback still signs in with the backend stopped. Also re-cuts docs/TBD-migrate-wave.md: auth is done, and cart, orders, shipments and invoices must move together, because the mock adapter keeps their state in one shared object and a partial flip fails at checkout. OpenSpec change: openspec/changes/replace-mock-api-wave-2
90 lines
2.6 KiB
Vue
90 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
const session = useSessionStore();
|
|
const { t } = useI18n();
|
|
</script>
|
|
|
|
<template>
|
|
<div class="topbar">
|
|
<div class="w1200 topbar-in">
|
|
<ul class="left">
|
|
<li><NuxtLink to="/">{{ t("shell.officialSite") }}</NuxtLink></li>
|
|
<li>|</li>
|
|
<li><NuxtLink to="/">{{ t("shell.mallHome") }}</NuxtLink></li>
|
|
<li>|</li>
|
|
<li><NuxtLink to="/">{{ t("shell.contact") }}</NuxtLink></li>
|
|
<li>|</li>
|
|
<li><NuxtLink to="/">{{ t("shell.about") }}</NuxtLink></li>
|
|
<li>|</li>
|
|
<li class="city">{{ t("shell.city") }}</li>
|
|
</ul>
|
|
<ul class="right">
|
|
<!-- The token lives in localStorage, so the server cannot know whether
|
|
anyone is signed in. Rendering this branch client-only keeps the
|
|
hydrated DOM in step with the server's logged-out markup; without
|
|
it, validating the session before hydration reports mismatches. -->
|
|
<ClientOnly>
|
|
<template v-if="session.isLoggedIn">
|
|
<li>{{ t("shell.welcome") }}<NuxtLink to="/user" class="red">{{ session.user?.display_name }}</NuxtLink></li>
|
|
<li>|</li>
|
|
<li><NuxtLink to="/user">{{ t("shell.userCenter") }}</NuxtLink></li>
|
|
<li>|</li>
|
|
<li class="clickable" @click="session.logout()">{{ t("shell.logout") }}</li>
|
|
</template>
|
|
<template v-else>
|
|
<li><NuxtLink to="/login" class="red">{{ t("shell.login") }}</NuxtLink></li>
|
|
<li><NuxtLink to="/register">{{ t("shell.register") }}</NuxtLink></li>
|
|
</template>
|
|
<template #fallback>
|
|
<li><NuxtLink to="/login" class="red">{{ t("shell.login") }}</NuxtLink></li>
|
|
<li><NuxtLink to="/register">{{ t("shell.register") }}</NuxtLink></li>
|
|
</template>
|
|
</ClientOnly>
|
|
<li>|</li>
|
|
<li><NuxtLink to="/stores" class="red">{{ t("shell.sellerJoin") }}</NuxtLink></li>
|
|
<li>|</li>
|
|
<li><NuxtLink to="/">{{ t("shell.mobile") }}</NuxtLink></li>
|
|
<li>|</li>
|
|
<li><NuxtLink to="/">{{ t("shell.appDownload") }}</NuxtLink></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.topbar {
|
|
border-bottom: 1px solid var(--mall-line);
|
|
height: 30px;
|
|
background: #f9f9f9;
|
|
font-size: 12px;
|
|
line-height: 30px;
|
|
}
|
|
.topbar-in {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
ul {
|
|
display: flex;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
li {
|
|
padding: 0 5px;
|
|
}
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
a:hover,
|
|
.clickable:hover {
|
|
color: var(--mall-red);
|
|
cursor: pointer;
|
|
}
|
|
.red {
|
|
color: var(--mall-red);
|
|
}
|
|
.city {
|
|
color: var(--mall-red);
|
|
}
|
|
</style>
|