如何将Django视图context字典中的数据传递给React组件

将全局authenticated变量传入React组件 #

步骤1：修正index.html的全局变量定义 #

你当前的写法会将布尔值转为字符串类型的"True"/"False"，后续逻辑判断容易出错，建议直接挂载到window对象上，输出原生布尔值：

<script>
    // 用Django模板的lower过滤器将True/False转为true/false，符合JS布尔值规范
    window.authenticated = {{ authenticated|lower }};
    console.log(window.authenticated);
</script>

步骤2：在App.js中直接读取全局变量 #

全局挂载的变量可以在React组件中直接读取，示例如下：

// App.js 函数组件示例
function App() {
    // 直接读取window上的全局认证状态
    const isAuthenticated = window.authenticated;

    // 可直接用该值做登录态判断、路由拦截、组件展示控制等逻辑
    return (
        <div className="App">
            {isAuthenticated ? <p>欢迎登录</p> : <p>请先登录</p>}
            {/* 其他组件逻辑 */}
        </div>
    );
}

export default App;

如果需要在多个组件复用该状态，建议将值存入React Context或Zustand/Redux等状态管理库中，避免重复读取全局变量。

补充：解决React fetch请求无法获取Django request.user的问题 #

该问题是因为默认fetch请求不会携带跨域Cookie，而Django的session认证依赖Cookie中的sessionid，按以下配置即可修复：

• 所有fetch请求添加credentials: 'include'配置，强制携带Cookie：

fetch('你的DRF接口地址', {
    credentials: 'include', // 必填项
    // 其他请求配置
})

• 如果你用django-cors-headers处理跨域，需要在Django的settings.py中添加配置：

CORS_ALLOW_CREDENTIALS = True
# 禁止使用CORS_ALLOW_ALL_ORIGINS = True，明确指定允许的前端地址
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000", # 你的React开发环境地址
    # 补充生产环境的前端地址
]

• 发起POST/PUT等非GET请求时，需要额外携带CSRF Token，从Cookie中读取后放到请求头即可：

// 读取Cookie中CSRF Token的工具函数
function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}

// 带CSRF Token的POST请求示例
fetch('你的DRF接口地址', {
    method: 'POST',
    credentials: 'include',
    headers: {
        'X-CSRFToken': getCookie('csrftoken'),
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(请求参数对象)
})

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