refactor: replace window.location.reload with requestTrustWithToken

Add `requestTrustWithToken(token)` to DevToolsRpcClient interface that
re-requests trust over the existing WS connection with a new token,
avoiding page reload that would lose user app state.

- BroadcastChannel auth-update handler now calls requestTrustWithToken
- ViewBuiltinClientAuthNotice submit calls context.rpc.requestTrustWithToken
- Token is persisted to localStorage/globalThis for future reconnections
- Static RPC mode provides no-op implementation (always trusted)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: antfu

packages/core/src/client/webcomponents/components/views-builtin/ViewBuiltinClientAuthNotice.vue

@@ -3,7 +3,7 @@ import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { ref } from 'vue'
 import VitePlus from '../icons/VitePlus.vue'
 
-defineProps<{
+const props = defineProps<{
   context: DocksContext
 }>()
 
@@ -13,8 +13,7 @@ function submitToken() {
   const value = tokenInput.value.trim()
   if (!value)
     return
-  localStorage.setItem('__VITE_DEVTOOLS_CONNECTION_AUTH_TOKEN__', value)
-  window.location.reload()
+  props.context.rpc.requestTrustWithToken(value)
 }
 </script>
 

packages/kit/src/client/rpc-static.ts

@@ -15,6 +15,7 @@ export async function createStaticRpcClientMode(
   return {
     isTrusted: true,
     requestTrust: async () => true,
+    requestTrustWithToken: async () => true,
     ensureTrusted: async () => true,
     call: (...args: any): any => staticCaller.call(
       args[0] as string,

packages/kit/src/client/rpc-ws.ts

@@ -61,9 +61,10 @@ export function createWsRpcClientMode(
     },
   })
 
-  async function requestTrust() {
-    if (isTrusted)
-      return true
+  let currentAuthToken = authToken
+
+  async function requestTrustWithToken(token: string) {
+    currentAuthToken = token
 
     const info = parseUA(navigator.userAgent)
     const ua = [
@@ -76,7 +77,7 @@ export function createWsRpcClientMode(
     ].filter(i => i).join(' ')
 
     const result = await serverRpc.$call('vite:anonymous:auth', {
-      authToken,
+      authToken: token,
       ua,
       origin: location.origin,
     })
@@ -87,6 +88,12 @@ export function createWsRpcClientMode(
     return result.isTrusted
   }
 
+  async function requestTrust() {
+    if (isTrusted)
+      return true
+    return requestTrustWithToken(currentAuthToken)
+  }
+
   async function ensureTrusted(timeout = 60_000): Promise<boolean> {
     if (isTrusted)
       trustedPromise.resolve(true)
@@ -113,6 +120,7 @@ export function createWsRpcClientMode(
       return isTrusted
     },
     requestTrust,
+    requestTrustWithToken,
     ensureTrusted,
     call: (...args: any): any => {
       return serverRpc.$call(

packages/kit/src/client/rpc.ts

@@ -59,6 +59,12 @@ export interface DevToolsRpcClient {
    */
   requestTrust: () => Promise<boolean>
 
+  /**
+   * Request trust from the server using a specific auth token.
+   * Updates the stored token and re-requests trust without reloading the page.
+   */
+  requestTrustWithToken: (token: string) => Promise<boolean>
+
   /**
    * Call a RPC function on the server
    */
@@ -86,6 +92,7 @@ export interface DevToolsRpcClientMode {
   readonly isTrusted: boolean
   ensureTrusted: DevToolsRpcClient['ensureTrusted']
   requestTrust: DevToolsRpcClient['requestTrust']
+  requestTrustWithToken: DevToolsRpcClient['requestTrustWithToken']
   call: DevToolsRpcClient['call']
   callEvent: DevToolsRpcClient['callEvent']
   callOptional: DevToolsRpcClient['callOptional']
@@ -234,6 +241,12 @@ export async function getDevToolsRpcClient(
     connectionMeta,
     ensureTrusted: mode.ensureTrusted,
     requestTrust: mode.requestTrust,
+    requestTrustWithToken: async (token: string) => {
+      // Update stored token for future reconnections
+      localStorage.setItem(CONNECTION_AUTH_TOKEN_KEY, token)
+      ;(globalThis as any)[CONNECTION_AUTH_TOKEN_KEY] = token
+      return mode.requestTrustWithToken(token)
+    },
     call: mode.call,
     callEvent: mode.callEvent,
     callOptional: mode.callOptional,
@@ -252,8 +265,7 @@ export async function getDevToolsRpcClient(
     const bc = new BroadcastChannel('vite-devtools-auth')
     bc.onmessage = (event) => {
       if (event.data?.type === 'auth-update' && event.data.authToken) {
-        localStorage.setItem(CONNECTION_AUTH_TOKEN_KEY, event.data.authToken)
-        window.location.reload()
+        rpc.requestTrustWithToken(event.data.authToken)
       }
     }
   }