120251867c
The guest token (the customer's only credential) was passed as
?token=... in the URL query string on the payment page. Query strings
land in browser history, nginx/reverse-proxy access logs, and can leak
via Referer headers.
The magic-link landing /gast-order/:token is inherently URL-based
(accepted Notion/Stripe pattern), but the payment page does not need to
expose the token in the URL.
Changes:
- GuestCheckoutPage.vue: store token in sessionStorage before
navigating to payment page; remove token from query string
- GuestOrderPage.vue: replace RouterLink with click handler that
stores token in sessionStorage before navigating to payment;
add useRouter import
- GuestPaymentRedirect.vue: read token from sessionStorage with
fallback to query.token for backward compatibility with existing
magic links
- GuestCheckoutPage.spec.ts: assert token is NOT in query, IS in
sessionStorage after navigation
- GuestPaymentRedirect.spec.ts: set sessionStorage in mount helper;
clear sessionStorage in beforeEach
sessionStorage persists across page refreshes within the same tab, so
the payment page still survives refresh. If the user opens the payment
URL in a new tab (from history), sessionStorage is lost — but the
canonical re-entry point is the magic link /gast-order/:token, from
which they can navigate to payment again.
Closes #21
|
||
|---|---|---|
| .. | ||
| e2e | ||
| public | ||
| src | ||
| .gitignore | ||
| .prettierrc | ||
| eslint.config.ts | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| playwright.config.ts | ||
| README.md | ||
| tsconfig.app.json | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
Vue 3 + TypeScript + Vite
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.
Learn more about the recommended Project Setup and IDE Support in the Vue Docs TypeScript Guide.