feat: 增加认证机制以安全地查询支付状态

stackblitz · Oct 22, 2024 · bf1d6cb · bf1d6cb
1 parent cd3a79e
commit bf1d6cb
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 6 deletions.
diff --git a/app/components/auth/PaymentModal.tsx b/app/components/auth/PaymentModal.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { Dialog, DialogTitle, DialogDescription, DialogRoot } from '~/components/ui/Dialog';
 import { toast } from 'react-toastify';
+import { useAuth } from '~/hooks/useAuth'; // 导入 useAuth hook
 
 interface PaymentModalProps {
   isOpen: boolean;
@@ -22,6 +23,7 @@ interface PaymentResponse {
   did: string;
   expires_in: string;
   return_url: string;
+  orderNo: string;
 }
 
 interface PaymentStatusResponse {
@@ -31,10 +33,20 @@ interface PaymentStatusResponse {
 
 export function PaymentModal({ isOpen, onClose, paymentData, onPaymentSuccess }: PaymentModalProps) {
   const [timeLeft, setTimeLeft] = useState(parseInt(paymentData.expires_in));
+  const { token } = useAuth(); // 获取认证token
 
   const checkPaymentStatus = useCallback(async () => {
+    if (!token) {
+      console.error('No authentication token available');
+      return;
+    }
+
     try {
-      const response = await fetch(`/api/check-payment-status?orderNo=${paymentData.no}`);
+      const response = await fetch(`/api/check-payment-status?orderNo=${paymentData.orderNo}`, {
+        headers: {
+          'Authorization': `Bearer ${token}`,
+        },
+      });
       if (!response.ok) {
         if (response.status === 404) {
           console.error('Order not found');
@@ -52,7 +64,7 @@ export function PaymentModal({ isOpen, onClose, paymentData, onPaymentSuccess }:
       console.error('Error checking payment status:', error);
       toast.error('检查支付状态时出错，请稍后再试');
     }
-  }, [paymentData.no, onPaymentSuccess, onClose]);
+  }, [paymentData.orderNo, onPaymentSuccess, onClose, token]);
 
   useEffect(() => {
     if (!isOpen) return;
@@ -89,7 +101,7 @@ export function PaymentModal({ isOpen, onClose, paymentData, onPaymentSuccess }:
             </div>
             <div className="text-center">
               <p className="text-bolt-elements-textPrimary">订单金额: ¥{paymentData.order_amount}</p>
-              <p className="text-bolt-elements-textSecondary">订单号: {paymentData.no}</p>
+              <p className="text-bolt-elements-textSecondary">订单号: {paymentData.orderNo}</p>
               <p className="text-bolt-elements-textSecondary">支付方式: {paymentData.pay_type}</p>
             </div>
             <div className="text-center">

diff --git a/app/routes/api.purchase-subscription.ts b/app/routes/api.purchase-subscription.ts
@@ -11,7 +11,7 @@ export async function action({ request }: { request: Request }) {
     return error as Response;
   }
 
-  const { planId, billingCycle } = await request.json() as { planId: string; billingCycle: string };
+  const { planId, billingCycle } = (await request.json()) as { planId: string; billingCycle: string };
 
   try {
     // 获取订阅计划详情
@@ -36,7 +36,7 @@ export async function action({ request }: { request: Request }) {
       `${plan.name} 订阅 (${billingCycle === 'yearly' ? '年付' : '月付'})`,
       'alipay', // 或其他支付方式
       price, // 不用转换为分
-      userId.toString()
+      userId.toString(),
     );
 
     // 创建待处理的交易记录
@@ -51,7 +51,7 @@ export async function action({ request }: { request: Request }) {
       transaction_id: orderNo,
     });
 
-    return json({ success: true, paymentData });
+    return json({ success: true, paymentData: { ...paymentData, orderNo } });
   } catch (error) {
     console.error('初始化订阅购买时出错:', error);
     return json({ error: '初始化订阅购买失败' }, { status: 500 });