Fix/reactive auth sharing persist#48
Conversation
|
@rodindev Just a quick reminder to request a review on this PR when you're ready so we can get it processed. Thanks! |
rodindev
left a comment
rodindev
left a comment
There was a problem hiding this comment.
Thanks for this. The shared Map<specName, Ref> is the right approach. I synced your branch with main (1.8.0 is out) and CI is green. Left a few inline notes, the watch one is the only blocker.
| } | ||
| } | ||
|
|
||
| watch(store, (value) => { |
There was a problem hiding this comment.
This watch binds to the first AuthControls that mounts, since it reads credential.value in setup, so it gets disposed on unmount and persistence stops after a page navigation. A detached effectScope(true), or writing to sessionStorage in set()/clear() instead of a watch, keeps it independent of any component.
| store.value = undefined | ||
| if (typeof sessionStorage !== 'undefined') { | ||
| const key = `${STORAGE_PREFIX}${name}` | ||
| const raw = sessionStorage.getItem(key) |
There was a problem hiding this comment.
Reading here instead of in onMounted can cause a hydration mismatch on reload with a stored token: the input renders filled on the client but empty in the SSG HTML.
| // sessionStorage quota exceeded — credential won't persist but UI still works | ||
| } | ||
| }) | ||
| /** Per-spec credential cache. SSR-safe (reads in onMounted). Accepts a reactive ref or plain string. */ |
There was a problem hiding this comment.
This still says reads in onMounted, which isn't the case anymore.
2 participants
What
Shared Reactive Auth State (
packages/core/src/runtime/auth.ts):authStoresCacheandgetAuthStore).onMountedimport.auth.spec.tsto verify state sharing across multiple hook instances.Immediate Credential Persistence (
packages/core/src/components/AuthControls.vue):@input="commit"handling on the credential input field to persist modifications instantly.AuthControls.spec.tsconfirming immediate persistence on input events.Request Authorization Tests (
packages/core/src/components/EndpointTryPanel.spec.ts):beareroauth2basicapikey(header, query, and cookie locations)Why
Closes #46
useAuthStatehook maintained its own independent state. If multiple playground or auth control components were active for the same spec, a credential update in one would not reactively propagate to others in real-time. Shared caching ensures perfect UI synchronization.input) ensures that API try-it requests and code snippets are dynamically updated without forcing the user to press Enter or trigger ablurevent by clicking elsewhere first.How to test
npm run typecheckpassesnpm run test:runpassesnpm run dev