feat(mall): authenticate against the live API

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

apps/mall/components/shell/TopBar.vue

@@ -18,17 +18,27 @@ const { t } = useI18n();
         <li class="city">{{ t("shell.city") }}</li>
       </ul>
       <ul class="right">
-        <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>
+        <!-- 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>