如何在Django-Inertia中实现带错误信息的返回上页功能？

要在Django+Vue+Inertia的架构中实现POST/PATCH请求失败后返回上一页并携带错误信息，你可以通过Flash Session存储错误信息 + Inertia重定向的方式实现，具体步骤如下：

1. 核心实现逻辑 #

和Laravel的withErrors逻辑一致，我们需要将结构化错误对象存入Django的Flash Session（会话临时存储的数据，仅在下一次请求有效），然后重定向到请求来源页，最后通过Inertia的共享Props让前端自动获取错误信息。

2. 后端代码示例 #

导入依赖 #

首先导入Inertia的redirect方法：

from inertia import redirect

视图函数中处理错误并重定向 #

以POST表单验证失败场景为例：

def submit_form(request):
    # 模拟表单验证失败，生成结构化错误对象
    errors = {
        "email": "邮箱格式不符合要求",
        "password": "密码长度不能少于6位"
    }

    # 将错误对象存入Flash Session
    request.session['errors'] = errors
    # 标记会话已修改，确保数据被正确保存
    request.session.modified = True

    # 获取请求来源页URL，若无则默认跳转到首页
    redirect_url = request.META.get('HTTP_REFERER', '/')

    # 安全校验：仅允许跳转到同域名页面，防止恶意跳转
    from urllib.parse import urlparse
    parsed_url = urlparse(redirect_url)
    if parsed_url.netloc != request.get_host():
        redirect_url = '/'

    # 重定向到请求来源页
    return redirect(redirect_url)

3. 配置Inertia共享Props #

为了让前端全局获取Session中的错误信息，需要在Django配置文件中设置共享数据，让Inertia自动将Flash Session中的errors传递给所有页面组件：

在settings.py中添加：

INERTIA_SHARED_DATA = {
    # 从Session取出错误信息，并移除Flash数据（确保仅生效一次）
    'errors': lambda request: request.session.pop('errors', None),
}

4. 前端Vue组件中使用错误信息 #

在Vue组件中，你可以通过$page.props.errors获取错误对象，并渲染到对应字段下方：

<template>
  <div class="form-container">
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label>邮箱</label>
        <input v-model="form.email" type="email" />
        <span v-if="$page.props.errors?.email" class="error-text">
          {{ $page.props.errors.email }}
        </span>
      </div>

      <div class="form-group">
        <label>密码</label>
        <input v-model="form.password" type="password" />
        <span v-if="$page.props.errors?.password" class="error-text">
          {{ $page.props.errors.password }}
        </span>
      </div>

      <button type="submit" class="submit-btn">提交</button>
    </form>
  </div>
</template>

<script setup>
import { useForm } from '@inertiajs/vue3'

// 使用Inertia表单助手提交请求
const form = useForm({
  email: '',
  password: ''
})

const handleSubmit = () => {
  form.post('/submit-form')
}
</script>

<style scoped>
.error-text {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}
</style>

关键说明 #

• Flash Session的作用：确保错误信息仅在重定向后的页面生效一次，避免刷新页面后错误重复显示。
• 安全校验：过滤外部域名的来源页，防止恶意跳转风险。
• 共享Props：无需在每个视图单独传递错误信息，实现全局可访问。

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