From 5ec6df4af80985626653f2e8591ba5e2699696f8 Mon Sep 17 00:00:00 2001
From: Boen_Shi <boen.shi@qq.com>
Date: Thu, 21 May 2026 16:43:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(OAuth2):=20=E5=AE=8C=E6=88=90Oauth2=20BUG?=
 =?UTF-8?q?=E7=9A=84=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/OauthClientsPage.vue |   6 +-
 src/pages/OauthConsentPage.vue | 185 +++++++++++++++++++++++++--------
 src/router/index.ts            |   4 +
 3 files changed, 151 insertions(+), 44 deletions(-)

diff --git a/src/pages/OauthClientsPage.vue b/src/pages/OauthClientsPage.vue
index d5588cf..068f958 100644
--- a/src/pages/OauthClientsPage.vue
+++ b/src/pages/OauthClientsPage.vue
@@ -11,11 +11,11 @@
       <el-table-column prop='id' label='ID' width='80' sortable />
       <el-table-column prop='name' label='名称' min-width='160' sortable />
       <el-table-column prop='client_id' label='Client ID' min-width='240' />
-      <el-table-column label='Scopes' min-width='220'>
+      <el-table-column label='UserInfo 字段' min-width='220'>
         <template #default='{ row }'>
           <div class='btn-gap-8'>
-            <el-tag v-for='scope in row.scopes || []' :key='`scope-${row.id}-${scope.id}`'>{{ scope.name }}</el-tag>
-            <span v-if='!(row.scopes || []).length' class='text-gray-400'>无</span>
+            <el-tag v-for='field in row.allowed_userinfo_fields || []' :key='`userinfo-${row.id}-${field}`' type='info'>{{ field }}</el-tag>
+            <span v-if='!(row.allowed_userinfo_fields || []).length' class='text-gray-400'>无</span>
           </div>
         </template>
       </el-table-column>
diff --git a/src/pages/OauthConsentPage.vue b/src/pages/OauthConsentPage.vue
index 3d103da..e2b30ab 100644
--- a/src/pages/OauthConsentPage.vue
+++ b/src/pages/OauthConsentPage.vue
@@ -1,73 +1,93 @@
 <template>
   <div class='oauth-consent-page'>
-    <el-card class='oauth-consent-card'>
+    <el-card class='oauth-consent-card' shadow='never'>
+      <div class='brand-line'>OAuth2 安全授权</div>
       <div class='header'>
         <img v-if='clientLogo' :src='clientLogo' class='logo' alt='client logo' />
-        <div>
-          <h2 class='title'>授权确认</h2>
-          <p class='subtitle'>{{ clientName || '第三方应用' }} 请求访问你的账号信息</p>
+        <div class='header-copy'>
+          <h2 class='title'>授权 {{ clientName || '第三方应用' }}</h2>
+          <p class='subtitle'>该应用将按服务端配置读取你的用户信息</p>
         </div>
       </div>
 
       <el-alert v-if='errorMessage' :title='errorMessage' type='error' show-icon :closable='false' class='mb-3' />
 
       <div class='section'>
-        <div class='label'>请求 Scope</div>
+        <div class='label'>将返回给应用的 UserInfo 字段</div>
         <div class='value'>
-          <el-tag v-for='scope in scopes' :key='scope' class='mr-2 mb-2'>{{ scope }}</el-tag>
-          <span v-if='!scopes.length' class='text-gray-500'>无</span>
+          <el-tag v-for='field in userinfoFields' :key='field' effect='plain' type='info' class='mr-2 mb-2'>{{ field }}</el-tag>
+          <span v-if='!userinfoFields.length' class='text-gray-500'>仅返回 `sub`</span>
         </div>
       </div>
 
-      <div class='section'>
-        <div class='label'>可能返回的用户字段</div>
-        <div class='value'>
-          <el-tag v-for='item in scopeMeta' :key='item.name' type='info' class='mr-2 mb-2'>
-            {{ item.display_name || item.name }}
-          </el-tag>
-          <span v-if='!scopeMeta.length' class='text-gray-500'>仅返回标准 subject 标识</span>
+      <div v-if='remapPairs.length' class='section'>
+        <div class='label'>字段映射规则</div>
+        <div class='value remap-grid'>
+          <div v-for='item in remapPairs' :key='`${item.from}-${item.to}`' class='remap-item'>
+            <span class='from'>{{ item.from }}</span>
+            <span class='arrow'>→</span>
+            <span class='to'>{{ item.to }}</span>
+          </div>
         </div>
       </div>
 
       <div class='actions btn-gap-8 btn-gap-8--end'>
-        <el-button @click='submitDecision(false)'>拒绝</el-button>
-        <el-button type='primary' @click='submitDecision(true)'>同意并继续</el-button>
+        <el-button class='reject-btn' @click='submitDecision(false)'>拒绝</el-button>
+        <el-button type='primary' class='approve-btn' @click='submitDecision(true)'>同意并继续</el-button>
       </div>
     </el-card>
   </div>
 </template>
 
 <script setup lang='ts'>
-import { computed, ref } from 'vue'
-import { useRoute } from 'vue-router'
+import { computed, onMounted, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { getToken } from '@/composables/token'
 
-interface ScopeMetaItem {
-  name: string
-  display_name: string
-  description?: string
+interface RemapPair {
+  from: string
+  to: string
 }
 
 const route = useRoute()
+const router = useRouter()
 const errorMessage = ref('')
 
 const clientName = computed(() => String(route.query.client_name || ''))
 const clientLogo = computed(() => String(route.query.client_logo || ''))
 const clientId = computed(() => String(route.query.client_id || ''))
 const redirectUri = computed(() => String(route.query.redirect_uri || ''))
-const scopeString = computed(() => String(route.query.scope || ''))
+const returnTo = computed(() => String(route.query.return_to || ''))
 const state = computed(() => String(route.query.state || ''))
 const nonce = computed(() => String(route.query.nonce || ''))
-const scopes = computed(() => scopeString.value.split(/\s+/).filter((item) => item.length > 0))
-const scopeMeta = computed<ScopeMetaItem[]>(() => {
-  const encoded = String(route.query.scope_meta || '')
+const userinfoFields = computed<string[]>(() => {
+  const encoded = String(route.query.userinfo_fields || '')
   if (!encoded) {
     return []
   }
 
   try {
     const parsed = JSON.parse(atob(encoded))
-    return Array.isArray(parsed) ? parsed : []
+    return Array.isArray(parsed) ? parsed.map((item) => String(item || '').trim()).filter((item) => item.length > 0) : []
+  } catch (_error) {
+    return []
+  }
+})
+const remapPairs = computed<RemapPair[]>(() => {
+  const encoded = String(route.query.userinfo_remap || '')
+  if (!encoded) {
+    return []
+  }
+
+  try {
+    const parsed = JSON.parse(atob(encoded))
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+      return []
+    }
+
+    return Object.entries(parsed)
+      .map(([from, to]) => ({ from: String(from || '').trim(), to: String(to || '').trim() }))
+      .filter((item) => item.from.length > 0 && item.to.length > 0)
   } catch (_error) {
     return []
   }
@@ -84,7 +104,11 @@ function resolveApiBase(): string {
 function submitDecision(approve: boolean): void {
   const token = getToken()
   if (!token) {
-    errorMessage.value = '登录已过期，请重新登录后再授权。'
+    if (returnTo.value) {
+      window.location.href = returnTo.value
+      return
+    }
+    errorMessage.value = '登录已过期，请从授权端点重新发起授权。'
     return
   }
   if (!clientId.value || !redirectUri.value) {
@@ -102,7 +126,6 @@ function submitDecision(approve: boolean): void {
     approve: approve ? '1' : '0',
     client_id: clientId.value,
     redirect_uri: redirectUri.value,
-    scope: scopeString.value,
     state: state.value,
     nonce: nonce.value,
     access_token: token,
@@ -119,6 +142,26 @@ function submitDecision(approve: boolean): void {
   document.body.appendChild(form)
   form.submit()
 }
+
+onMounted(() => {
+  const token = getToken()
+  if (token) {
+    return
+  }
+
+  const returnToValue = returnTo.value
+  if (!returnToValue) {
+    errorMessage.value = '缺少授权上下文，请从 OAuth 授权端点重新发起。'
+    return
+  }
+
+  router.replace({
+    path: '/login',
+    query: {
+      return_to: returnToValue,
+    },
+  }).catch(() => null)
+})
 </script>
 
 <style scoped>
@@ -131,40 +174,100 @@ function submitDecision(approve: boolean): void {
   background: #f1f5f9;
 }
 .oauth-consent-card {
-  width: min(760px, 100%);
+  width: min(620px, 100%);
+  border: 1px solid #dbeafe;
+  border-radius: 16px;
+}
+.brand-line {
+  margin-bottom: 12px;
+  color: #0284c7;
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  font-weight: 700;
 }
 .header {
   display: flex;
   align-items: center;
   gap: 14px;
-  margin-bottom: 18px;
+  margin-bottom: 22px;
+}
+.header-copy {
+  min-width: 0;
 }
 .logo {
-  width: 46px;
-  height: 46px;
-  border-radius: 8px;
+  width: 54px;
+  height: 54px;
+  border-radius: 12px;
   object-fit: cover;
-  border: 1px solid #e2e8f0;
+  border: 1px solid #bae6fd;
+  box-shadow: 0 8px 20px rgba(3, 105, 161, 0.18);
 }
 .title {
-  margin: 0 0 4px;
-  font-size: 22px;
+  margin: 0 0 6px;
+  font-size: 24px;
+  color: #0f172a;
+  word-break: break-word;
 }
 .subtitle {
   margin: 0;
-  color: #64748b;
+  color: #475569;
 }
 .section {
-  margin-bottom: 14px;
+  margin-bottom: 16px;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.75);
+  padding: 12px;
 }
 .label {
   font-weight: 600;
-  margin-bottom: 8px;
+  color: #0f172a;
+  margin-bottom: 10px;
 }
 .value {
   min-height: 28px;
 }
+.remap-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.remap-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 9999px;
+  background: #ecfeff;
+  border: 1px solid #bae6fd;
+  color: #0f172a;
+  font-size: 13px;
+}
+.arrow {
+  color: #0ea5e9;
+}
 .actions {
-  margin-top: 8px;
+  margin-top: 12px;
+}
+.reject-btn {
+  border-color: #cbd5e1;
+}
+.approve-btn {
+  min-width: 136px;
+}
+:deep(.el-card__body) {
+  padding: 24px;
+}
+@media (max-width: 640px) {
+  .oauth-consent-page {
+    padding: 20px 12px;
+  }
+  :deep(.el-card__body) {
+    padding: 18px;
+  }
+  .title {
+    font-size: 20px;
+  }
 }
 </style>
diff --git a/src/router/index.ts b/src/router/index.ts
index a16d2ff..7a47716 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -13,6 +13,7 @@ const routes: RouteRecordRaw[] = [
   {
     path: '/oauth-consent',
     component: () => import('@/pages/OauthConsentPage.vue'),
+    meta: { guest: true },
   },
   {
     path: '/',
@@ -71,6 +72,9 @@ router.beforeEach(async (to) => {
     if (to.path === '/login' && returnTo) {
       return true
     }
+    if (to.path === '/oauth-consent') {
+      return true
+    }
     const forcePasswordChange = Boolean((authStore.user as any)?.force_password_change)
     if (forcePasswordChange) {
       if (to.path === '/login') {