如何在App目录中像getServerSideProps的context参数那样访问请求信息？

一、直接在组件中获取请求数据的方式 #

服务端渲染组件场景 #

如果你的组件是服务端渲染（如Next.js getServerSideProps、Nuxt asyncData），可以直接在服务端逻辑里拿到请求对象，解析请求体后传递给组件：

// Next.js 示例
export async function getServerSideProps(context) {
  const { req } = context;
  // 解析JSON格式的请求体
  const requestBody = await new Promise((resolve) => {
    let body = '';
    req.on('data', chunk => body += chunk.toString());
    req.on('end', () => resolve(JSON.parse(body)));
  });
  
  return { props: { requestBody } };
}

function MyComponent({ requestBody }) {
  // 直接访问请求体中的token
  const token = requestBody?.token;
  
  // 验证后跳转
  if (token === 'your-valid-token') {
    window.location.href = 'https://target-site.com';
  }
  
  return <div>组件内容</div>;
}

客户端组件+前端发起请求场景 #

如果是客户端组件，且请求由前端发起，可以通过请求拦截器存储请求数据，再在组件中读取：

// 全局Axios拦截器示例
import axios from 'axios';

let currentRequestData = null;
axios.interceptors.request.use(config => {
  currentRequestData = config.data; // 缓存请求体
  return config;
});

// 组件内使用
function MyComponent() {
  useEffect(() => {
    const token = currentRequestData?.token;
    if (token && token === 'your-valid-token') {
      window.location.href = 'https://target-site.com';
    }
  }, []);
  
  return <div>组件内容</div>;
}

二、无法直接获取时的替代方案 #

状态管理工具存储 #

用Redux、Pinia这类状态管理工具，在请求时将请求体存入状态，组件从状态中读取：

// Pinia Store示例
import { defineStore } from 'pinia';

export const useRequestStore = defineStore('request', {
  state: () => ({
    currentBody: null
  }),
  actions: {
    setRequestBody(data) {
      this.currentBody = data;
    }
  }
});

// 拦截器中更新状态
axios.interceptors.request.use(config => {
  const requestStore = useRequestStore();
  requestStore.setRequestBody(config.data);
  return config;
});

// 组件中读取
function MyComponent() {
  const requestStore = useRequestStore();
  const token = requestStore.currentBody?.token;
  
  useEffect(() => {
    if (token === 'your-valid-token') {
      window.location.href = 'https://target-site.com';
    }
  }, [token]);
  
  return <div>组件内容</div>;
}

服务端预处理后传结果 #

如果组件无法直接获取请求体，可在服务端先验证token，将跳转地址或验证结果作为props传给组件：

// Express服务端示例
app.post('/your-path', async (req, res) => {
  const { token } = req.body;
  const redirectUrl = token === 'your-valid-token' ? 'https://target-site.com' : null;
  
  // 渲染组件并传递参数
  res.render('MyComponent', { redirectUrl });
});

// 组件内处理跳转
function MyComponent({ redirectUrl }) {
  useEffect(() => {
    if (redirectUrl) {
      window.location.href = redirectUrl;
    }
  }, [redirectUrl]);
  
  return <div>组件内容</div>;
}

三、场景优化建议 #

• 优先在服务端验证token：避免敏感逻辑暴露在前端，提升安全性，服务端验证通过后可直接返回302跳转响应，无需组件处理。
• 前端处理时确保HTTPS传输：防止token明文泄露。

内容的提问来源于stack exchange，提问作者joe