vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 事件详情页 URL ID 加密，防止用户遍历

Browse Source 
- 新增 idEncoder.ts 工具：使用 Base64 + 前缀混淆加密 ID
- 路由改为查询参数形式：/event-detail?id=xxx
- 更新所有入口使用 getEventDetailUrl() 生成加密链接
- 兼容旧链接：纯数字 ID 仍可正常访问

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-04 18:26:01 +08:00
parent 6cf92b6851
commit f64c1ffb19
7 changed files with 94 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/Community/hooks/useEventFilters.js
View File

@@ -6,6 +6,7 @@ import { useSearchParams } from 'react-router-dom';
import { logger } from '../../../utils/logger';
import { usePostHogTrack } from '../../../hooks/usePostHogRedux';
import { RETENTION_EVENTS } from '../../../lib/constants';
import { getEventDetailUrl } from '@/utils/idEncoder';
/**
* 事件筛选逻辑 Hook
@@ -145,7 +146,7 @@ export const useEventFilters = ({ navigate, onEventClick, eventTimelineRef } = {
});
if (navigate) {
navigate(`/event-detail/${eventId}`);
navigate(getEventDetailUrl(eventId));
}
}, [navigate, track]);

3
src/views/Dashboard/Center.js
View File

@@ -62,6 +62,7 @@ import {
} from 'react-icons/fi';
import MyFutureEvents from './components/MyFutureEvents';
import InvestmentPlanningCenter from './components/InvestmentPlanningCenter';
import { getEventDetailUrl } from '@/utils/idEncoder';
export default function CenterDashboard() {
const { user } = useAuth();
@@ -441,7 +442,7 @@ export default function CenterDashboard() {
<VStack align="stretch" spacing={3}>
<LinkOverlay
as={Link}
to={`/event-detail/${event.id}`}
to={getEventDetailUrl(event.id)}
>
<Text fontWeight="medium" fontSize="md" noOfLines={2}>
{event.title}

70
src/views/EventDetail/index.js
View File

@@ -1,5 +1,6 @@
import React, { useState, useEffect, useRef } from 'react';
import { useParams, useLocation } from 'react-router-dom';
import { useParams, useLocation, useSearchParams } from 'react-router-dom';
import { decodeEventId } from '@/utils/idEncoder';
import {
Box,
Container,
@@ -349,11 +350,16 @@ const PostItem = ({ post, onRefresh, eventEvents }) => {
};
const EventDetail = () => {
const { eventId } = useParams();
const { eventId: pathEventId } = useParams();
const [searchParams] = useSearchParams();
const location = useLocation();
const bgColor = useColorModeValue('gray.50', 'gray.900');
const toast = useToast();
// 优先从查询参数获取加密 ID，兼容旧的路径参数
const encodedId = searchParams.get('id');
const eventId = encodedId ? decodeEventId(encodedId) : pathEventId;
// 用户认证和权限控制
const { user } = useAuth();
const { hasFeatureAccess, getUpgradeRecommendation } = useSubscription();
@@ -385,22 +391,6 @@ const EventDetail = () => {
const [submitting, setSubmitting] = useState(false);
const [upgradeModal, setUpgradeModal] = useState({ isOpen: false, feature: '功能', required: 'pro' });
// 从URL路径中提取eventId（处理多种URL格式）
const getEventIdFromPath = () => {
const pathParts = location.pathname.split('/');
const lastPart = pathParts[pathParts.length - 1];
const secondLastPart = pathParts[pathParts.length - 2];
if (!isNaN(lastPart) && lastPart) {
return lastPart;
}
if (!isNaN(secondLastPart) && secondLastPart) {
return secondLastPart;
}
return eventId;
};
const actualEventId = getEventIdFromPath();
// 保存当前滚动位置
const saveScrollPosition = () => {
@@ -418,38 +408,38 @@ const EventDetail = () => {
setError(null);
// 加载基本事件信息（免费用户也可以访问）
const eventResponse = await eventService.getEventDetail(actualEventId);
const eventResponse = await eventService.getEventDetail(eventId);
setEventData(eventResponse.data);
// 总是尝试加载相关股票（权限在组件内部检查）
let stocksCount = 0;
try {
const stocksResponse = await eventService.getRelatedStocks(actualEventId);
const stocksResponse = await eventService.getRelatedStocks(eventId);
setRelatedStocks(stocksResponse.data || []);
stocksCount = stocksResponse.data?.length || 0;
} catch (e) {
logger.warn('EventDetail', '加载相关股票失败', { eventId: actualEventId, error: e.message });
logger.warn('EventDetail', '加载相关股票失败', { eventId: eventId, error: e.message });
setRelatedStocks([]);
}
// 根据权限决定是否加载相关概念
if (hasFeatureAccess('related_concepts')) {
try {
const conceptsResponse = await eventService.getRelatedConcepts(actualEventId);
const conceptsResponse = await eventService.getRelatedConcepts(eventId);
setRelatedConcepts(conceptsResponse.data || []);
} catch (e) {
logger.warn('EventDetail', '加载相关概念失败', { eventId: actualEventId, error: e.message });
logger.warn('EventDetail', '加载相关概念失败', { eventId: eventId, error: e.message });
}
}
// 历史事件所有用户都可以访问，但免费用户只看到前2条
let timelineCount = 0;
try {
const eventsResponse = await eventService.getHistoricalEvents(actualEventId);
const eventsResponse = await eventService.getHistoricalEvents(eventId);
setHistoricalEvents(eventsResponse.data || []);
timelineCount = eventsResponse.data?.length || 0;
} catch (e) {
logger.warn('EventDetail', '历史事件加载失败', { eventId: actualEventId, error: e.message });
logger.warn('EventDetail', '历史事件加载失败', { eventId: eventId, error: e.message });
}
// 🎯 追踪事件分析内容查看（数据加载完成后）
@@ -463,7 +453,7 @@ const EventDetail = () => {
}
} catch (err) {
logger.error('EventDetail', 'loadEventData', err, { eventId: actualEventId });
logger.error('EventDetail', 'loadEventData', err, { eventId: eventId });
setError(err.message || '加载事件数据失败');
} finally {
setLoading(false);
@@ -473,16 +463,16 @@ const EventDetail = () => {
const refetchStocks = async () => {
if (!hasFeatureAccess('related_stocks')) return;
try {
const stocksResponse = await eventService.getRelatedStocks(actualEventId);
const stocksResponse = await eventService.getRelatedStocks(eventId);
setRelatedStocks(stocksResponse.data);
} catch (err) {
logger.error('EventDetail', 'refetchStocks', err, { eventId: actualEventId });
logger.error('EventDetail', 'refetchStocks', err, { eventId: eventId });
}
};
const handleFollowToggle = async () => {
try {
await eventService.toggleFollow(actualEventId, eventData.is_following);
await eventService.toggleFollow(eventId, eventData.is_following);
setEventData(prev => ({
...prev,
@@ -492,7 +482,7 @@ const EventDetail = () => {
: prev.follower_count + 1
}));
} catch (err) {
logger.error('EventDetail', 'handleFollowToggle', err, { eventId: actualEventId });
logger.error('EventDetail', 'handleFollowToggle', err, { eventId: eventId });
}
};
@@ -500,12 +490,12 @@ const EventDetail = () => {
const loadPosts = async () => {
setPostsLoading(true);
try {
const result = await eventService.getPosts(actualEventId);
const result = await eventService.getPosts(eventId);
if (result.success) {
setPosts(result.data || []);
}
} catch (err) {
logger.error('EventDetail', 'loadPosts', err, { eventId: actualEventId });
logger.error('EventDetail', 'loadPosts', err, { eventId: eventId });
} finally {
setPostsLoading(false);
}
@@ -517,7 +507,7 @@ const EventDetail = () => {
setSubmitting(true);
try {
const result = await eventService.createPost(actualEventId, {
const result = await eventService.createPost(eventId, {
title: newPostTitle.trim(),
content: newPostContent.trim(),
content_type: 'text',
@@ -552,7 +542,7 @@ const EventDetail = () => {
// Effect hook - must be called after all state hooks
useEffect(() => {
if (actualEventId) {
if (eventId) {
// 保存当前滚动位置
saveScrollPosition();
@@ -570,7 +560,7 @@ const EventDetail = () => {
setError('无效的事件ID');
setLoading(false);
}
}, [actualEventId, location.pathname]);
}, [eventId]);
// 加载状态
if (loading) {
@@ -614,9 +604,9 @@ const EventDetail = () => {
</AlertTitle>
<AlertDescription maxWidth="sm">
{error}
{actualEventId && (
{eventId && (
<Text mt={2} fontSize="sm" color="gray.500">
事件ID: {actualEventId}
事件ID: {eventId}
</Text>
)}
</AlertDescription>
@@ -718,7 +708,7 @@ const EventDetail = () => {
</VStack>
) : (
<RelatedStocks
eventId={actualEventId}
eventId={eventId}
eventTime={eventData?.created_at}
stocks={relatedStocks}
loading={false}
@@ -749,7 +739,7 @@ const EventDetail = () => {
<RelatedConcepts
eventTitle={eventData?.title}
eventTime={eventData?.created_at}
eventId={actualEventId}
eventId={eventId}
loading={loading}
error={error}
/>
@@ -811,7 +801,7 @@ const EventDetail = () => {
</VStack>
) : (
<TransmissionChainAnalysis
eventId={actualEventId}
eventId={eventId}
eventService={eventService}
/>
)}