fix: improve permssion prompt

antfu · antfu · commit 91ae0bd1708a · 2023-10-01T22:26:22.000+08:00
diff --git a/packages/devtools-kit/src/_types/rpc.ts b/packages/devtools-kit/src/_types/rpc.ts
@@ -64,7 +64,7 @@ export interface ServerFunctions {
   customTabAction(name: string, action: number): Promise<boolean>
   runWizard<T extends WizardActions>(token: string, name: T, ...args: GetWizardArgs<T>): Promise<void>
   openInEditor(filepath: string): Promise<boolean>
-  requestForAuth(info?: string): Promise<void>
+  requestForAuth(info?: string, origin?: string): Promise<void>
   verifyAuthToken(token: string): Promise<boolean>
   restartNuxt(hard?: boolean): Promise<void>
   installNuxtModule(token: string, name: string, dry?: boolean): Promise<InstallModuleReturn>
diff --git a/packages/devtools/client/components/AuthRequiredPanel.vue b/packages/devtools/client/components/AuthRequiredPanel.vue
@@ -8,7 +8,7 @@ onMounted(async () => {
     }
   }
   if (!isDevAuthed.value)
-    rpc.requestForAuth()
+    requestForAuth()
 })
 
 const authInput = ref('')
diff --git a/packages/devtools/client/composables/dev-auth.ts b/packages/devtools/client/composables/dev-auth.ts
@@ -51,7 +51,7 @@ export async function ensureDevAuthToken() {
 
 export const userAgentInfo = new UAParser(navigator.userAgent).getResult()
 
-async function authConfirmAction() {
+export async function requestForAuth() {
   const desc = [
     userAgentInfo.browser.name,
     userAgentInfo.browser.version,
@@ -60,7 +60,12 @@ async function authConfirmAction() {
     userAgentInfo.os.version,
     userAgentInfo.device.type,
   ].filter(i => i).join(' ')
-  rpc.requestForAuth(desc)
+  return await rpc.requestForAuth(desc, window.location.origin)
+}
+
+async function authConfirmAction() {
+  if (!devAuthToken.value)
+    requestForAuth()
 
   const result = await Promise.race([
     AuthConfirm.start(),
diff --git a/packages/devtools/client/pages/modules/custom-[name].vue b/packages/devtools/client/pages/modules/custom-[name].vue
@@ -24,7 +24,7 @@ onMounted(() => {
     }, 2000)
   }
   else if (tab.value.requireAuth && !isDevAuthed.value) {
-    rpc.requestForAuth()
+    requestForAuth()
   }
 })
 </script>
diff --git a/packages/devtools/src/server-rpc/general.ts b/packages/devtools/src/server-rpc/general.ts
@@ -149,15 +149,17 @@ export function setupGeneralRPC({ nuxt, options, refresh, openInEditorHooks }: N
       logger.info('Restarting Nuxt...')
       return nuxt.callHook('restart', { hard })
     },
-    async requestForAuth(info: string) {
+    async requestForAuth(info: string, origin?: string) {
       const token = await getDevAuthToken()
 
+      origin ||= `${nuxt.options.devServer.https ? 'https' : 'http'}://${nuxt.options.devServer.host === '::' ? 'localhost' : (nuxt.options.devServer.host || 'localhost')}:${nuxt.options.devServer.port}`
+
       const message = [
         `A browser is requesting permissions of ${colors.bold(colors.yellow('writing files and running commands'))} from the DevTools UI.`,
         colors.bold(info),
         '',
         'Please open the following URL in the browser:',
-        colors.bold(colors.green(`${nuxt.options.devServer.https ? 'https' : 'http'}://${nuxt.options.devServer.host === '::' ? 'localhost' : (nuxt.options.devServer.host || 'localhost')}:${nuxt.options.devServer.port}${ROUTE_AUTH}?token=${token}`)),
+        colors.bold(colors.green(`${origin}${ROUTE_AUTH}?token=${token}`)),
         '',
         'Or manually copy and paste the following token:',
         colors.bold(colors.cyan(token)),

Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ onMounted(async () => {`
`8`	`8`	`}`
`9`	`9`	`}`
`10`	`10`	`if (!isDevAuthed.value)`
`11`		`- rpc.requestForAuth()`
	`11`	`+ requestForAuth()`
`12`	`12`	`})`
`13`	`13`
`14`	`14`	`const authInput = ref('')`
Original file line number	Diff line number	Diff line change
`@@ -24,7 +24,7 @@ onMounted(() => {`
`24`	`24`	`}, 2000)`
`25`	`25`	`}`
`26`	`26`	`else if (tab.value.requireAuth && !isDevAuthed.value) {`
`27`		`- rpc.requestForAuth()`
	`27`	`+ requestForAuth()`
`28`	`28`	`}`
`29`	`29`	`})`
`30`	`30`	`</script>`