refactor: Enhance OAuth authorization flow with improved parameter handling and loading state

src/actions/user-authorize.ts

@@ -17,9 +17,28 @@ export async function signIn(data: Record<string, any>) {
 
     if (oauthParams) {
       // 清除 cookie
-      cookieStore.delete("oauth_params");
-      // 重定向到授权页面，带上 OAuth 参数
-      redirect(`/oauth/authorize?${oauthParams.value}`);
+      cookieStore.set("oauth_params", "", { maxAge: 0 });
+
+      // 解析原始的 OAuth 参数
+      const params = new URLSearchParams(oauthParams.value);
+      const clientId = params.get("client_id");
+      const redirectUri = params.get("redirect_uri");
+      const state = params.get("state");
+      const scope = params.get("scope") || "read_profile";
+
+      // 重新构建授权页面 URL
+      const authParams = new URLSearchParams({
+        response_type: "code",
+        client_id: clientId || "",
+        redirect_uri: redirectUri || "",
+        scope,
+      });
+      if (state) {
+        authParams.set("state", state);
+      }
+
+      // 重定向到授权页面
+      redirect(`/oauth/authorize?${authParams.toString()}`);
     }
 
     // 如果没有 OAuth 参数，重定向到仪表板

src/components/auth/user-authorize.tsx

@@ -24,16 +24,18 @@ export function UserAuthorize({
     if (isLoading) {
       return;
     }
-    setIsLoading(true);
-    try {
-      // 从 URL 中获取 sso 和 sig 参数
+
+    // 检查是否是 SSO 回调
     const sso = searchParams?.get("sso");
     const sig = searchParams?.get("sig");
 
+    // 如果没有 SSO 参数，说明这是 OAuth 授权页面，不需要处理
     if (!sso || !sig) {
-        throw new Error("缺少必要的认证参数");
+      return;
     }
 
+    setIsLoading(true);
+    try {
       // 传递 SSO 参数
       await signIn({
         sso,
@@ -42,10 +44,10 @@ export function UserAuthorize({
 
       // 登录成功后刷新路由状态
       router.refresh();
-      setIsLoading(false);
     } catch (error) {
       console.error("登录过程出错:", error);
       setError(error);
+    } finally {
       setIsLoading(false);
     }
   }, [isLoading, router, searchParams]);
@@ -54,6 +56,25 @@ export function UserAuthorize({
     signInCallback();
   }, [signInCallback]);
 
+  // 如果没有 SSO 参数，显示正在处理授权的界面
+  if (!searchParams?.get("sso")) {
+    return (
+      <Card className="w-full">
+        <CardHeader className="space-y-4 text-center">
+          <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
+            <div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-600 border-t-transparent"></div>
+          </div>
+          <CardTitle className="text-2xl font-semibold">正在处理授权</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-center text-gray-500">
+            请稍候，我们正在处理您的授权请求
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
   if (error) {
     return (
       <Card className="w-full">
@@ -82,11 +103,11 @@ export function UserAuthorize({
         <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-blue-100">
           <div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-600 border-t-transparent"></div>
         </div>
-        <CardTitle className="text-2xl font-semibold">正在处理授权</CardTitle>
+        <CardTitle className="text-2xl font-semibold">正在处理登录</CardTitle>
       </CardHeader>
       <CardContent>
         <p className="text-center text-gray-500">
-          {isLoading ? "请稍候，我们正在处理您的授权请求" : "正在跳转..."}
+          {isLoading ? "请稍候，我们正在处理您的登录请求" : "正在跳转..."}
         </p>
       </CardContent>
     </Card>