基于服务端响应的SvelteKit条件渲染异常排查

我用Django做服务端、SvelteKit做客户端开发Web应用，注册流程里服务端给用户邮箱发送带token的链接，用户点击跳转至SvelteKit域名后，客户端将token发送至服务端验证。服务端ValidateTokenView视图会返回token是否有效/过期的响应，预期逻辑是：token有效则显示完成注册模块，否则显示重新发送token的表单。

目前遇到的问题：服务端逻辑正常，有效token能正确返回{"valid": true, "message": "Token is valid"}，浏览器控制台也能接收到该响应，但SvelteKit页面始终渲染else块（即无效/过期token的表单）。

服务端代码（views.py） #

@method_decorator(csrf_exempt, name='dispatch')
class ValidateTokenView(View):
    def get(self, request, token, *args, **kwargs):
        try:
            # Check if the token exists in the database
            token_instance = EmailConfirmationToken.objects.filter(token=token).first()
            print(f"Token received: {token}")
            print(f"Token instance retrieved: {token_instance}")

            if token_instance:
                print(f"Token created at: {token_instance.created_at}")
                is_expired = token_instance.is_expired()
                print(f"Is token expired? {is_expired}")

                if not is_expired:
                    # If the token is valid and not expired, respond with success
                    return JsonResponse({'valid': True, 'message': 'Token is valid'})
                else:
                    # If the token is expired, respond with failure
                    return JsonResponse({'valid': False, 'message': 'Token is expired'}, status=400)
            else:
                # If the token instance is not found
                return JsonResponse({'valid': False, 'message': 'Token is invalid or expired'}, status=400)
        except Exception as e:
            print(f'Unexpected error: {str(e)}')
            return JsonResponse({'error': 'Internal server error'}, status=500)

SvelteKit +page.js代码 #

export async function load({ url }) {
    const token = url.searchParams.get('token');
    console.log('Token:', token);
  
    if (!token) {
        return { props: { valid: false } };
    }
  
    const res = await fetch(`http://localhost:8000/validate-token/${token}`);
    console.log('Fetch Response:', res); 
  
    if (res.ok) {
        const data = await res.json();
        console.log('Response Data:', data); 
        return { props: { valid: data.valid, formData: data.data } };
    } else {
        return { props: { valid: false } };
    }
}

浏览器控制台日志 #

Fetch Response: Response {type: 'cors', url: 'http://localhost:8000/validate-token/Eg7t0r2GEbTeSIQ3qvk7aiAhhVwYA3Pi/', redirected: true, status: 200, ok: true, …}
+page.js:14 Response Data: {valid: true, message: 'Token is valid'}

SvelteKit +page.svelte代码 #

<script>
  export let data; // Import the data prop

  let { valid, data: formData } = data; // Destructure the data prop
  let email = '';
  let emailError = '';
  let csrfToken = '';
  let emailExistsError = '';
  let loading = false; 

  async function handleContinue() {
    emailError = validateEmail(email);
    if (!emailError) {
      loading = true; 
      try {
        csrfToken = await fetchCsrfToken();
        const data = await checkEmail(email, csrfToken);

        if (data.exists) {
          emailExistsError = 'This email address is already registered.';
        } else {
          emailExistsError = ''; 
          alert(`A new magic link has been sent to ${email}.`);
          window.location.href = '/';
        }
      } catch (error) {
        console.error('Error:', error);
      } finally {
        loading = false;
      }
    }
  }
</script>

<!-- Preceding html -->
  {#if valid}
    <h1>Almost there!</h1>
    <p>Finish creating your account so that you can upgrade to membership.</p>
    <div class="input-container">
      <label>Your full name</label>
      <input type="text" value={formData.fullName} readonly />
    </div>
    <div class="input-container">
      <label>Your email</label>
      <input type="email" value={formData.email} readonly />
    </div>
    <button>Create account</button>
  {:else}
    <h1 class="expired-header">Your sign up link has expired</h1>
    <p class="expired-paragraph">Enter the email address associated with your account, and we’ll send a new magic link to your inbox.</p>
    <form on:submit|preventDefault={handleContinue}>
      <input
        type="email"
        name="email"
        placeholder="Your email"
        bind:value={email}
        class:invalid={emailError || emailExistsError}
        required
      />
      {#if emailError}
        <div class="error-message">{emailError}</div>
      {/if}
      {#if emailExistsError}
        <div class="error-message">{emailExistsError}</div>
      {/if}
      {#if loading}
        <div class="loading">Checking email... Please wait.</div>
      {/if}
      <button type="submit">Continue</button>
    </form>
  {/if}
</div>

排查疑点 #

1. 页面加载后需等待数秒才显示服务端响应日志，怀疑页面在收到响应前已完成渲染，导致else块被优先显示；
2. VS Code中{#if valid}的valid被推断为any类型，推测数据传递存在问题。

问题根源分析 #

1. 数据解构错误：在+page.svelte的script中，let { valid, data: formData } = data;存在变量名冲突：页面的props本身就叫data，你试图从data中解构出data字段赋值给formData，但服务端响应和+page.js返回的props里根本没有data字段，同时valid的解构逻辑因为变量名混淆，实际拿到的是undefined，导致{#if valid}判定为false，进入else块。
2. 无效的formData赋值：+page.js中返回formData: data.data，但服务端响应里只有valid和message，data.data是undefined，这也会导致后续表单渲染出错。

修复步骤 #

1. 修正+page.js返回值：移除不存在的formData字段（若后续需要用户信息，需在服务端响应中添加data字段）：

export async function load({ url }) {
    const token = url.searchParams.get('token');
    console.log('Token:', token);
  
    if (!token) {
        return { props: { valid: false } };
    }
  
    const res = await fetch(`http://localhost:8000/validate-token/${token}`);
    console.log('Fetch Response:', res); 
  
    if (res.ok) {
        const data = await res.json();
        console.log('Response Data:', data); 
        return { props: { valid: data.valid } };
    } else {
        return { props: { valid: false } };
    }
}

2. 修正+page.svelte解构逻辑：避免变量名冲突，直接从props中取出valid：

<script>
  export let data; // Import the data prop

  let { valid } = data; // 直接解构valid，去掉无效的formData
  let email = '';
  let emailError = '';
  let csrfToken = '';
  let emailExistsError = '';
  let loading = false; 

  // 其余函数逻辑不变
</script>

3. 解决类型推断问题：添加JSDoc类型提示，让VS Code正确推断valid类型：

/** @type {import('./$types').PageLoad} */
export async function load({ url }) {
    // 原有逻辑不变
}

额外验证 #

在+page.svelte的script开头添加console.log('Valid status:', valid);，确认valid的值是否正确；同时检查服务端返回的valid字段是否为小写（避免拼写错误）。

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