如何在登录环节传递变量判断首次登录并控制多步骤设置展示？

Great question! This is a super common scenario in user onboarding, and the key is to separate two distinct user states instead of relying on a single flag—let’s break this down step by step.

You need to track two independent status fields in your user database, not just one:

• is_first_login: A boolean that stays true until the user completes their first successful login session (or you can set it to false after their first login, but keep reading).
• onboarding_completed: A boolean that defaults to false and only switches to true once the user finishes all steps of the multi-step setup.

The trigger condition you care about is:

should_show_onboarding = is_first_login AND NOT onboarding_completed

This way, even if a user is technically in their "first login" state, if they already finished the setup, the trigger gets canceled.

The implementation depends on your architecture, but here are the most common approaches:

1. Server-Side Rendering (SSR) #

If you’re rendering pages on the backend:

• After validating the user’s login credentials, query your database for the two status fields.
• Calculate the should_show_onboarding flag server-side.
• Pass this flag to your frontend template (as a prop, global variable, or template variable).

Example (Node.js/Express):

// Login route handler
app.post('/login', async (req, res) => {
  const user = await validateCredentials(req.body.email, req.body.password);
  const shouldShowOnboarding = user.is_first_login && !user.onboarding_completed;
  
  // Pass the flag to your dashboard template
  res.render('dashboard', { shouldShowOnboarding, user });
});

2. Single-Page Application (SPA) #

For frontend-heavy apps:

• After login succeeds, make an API call to fetch the user’s profile data (including the two status fields).
• Calculate the should_show_onboarding flag on the frontend, and store it in your state management tool (Redux, Vuex, React Context) or session storage (avoid local storage for sensitive state).
• Use a route guard or component check to redirect the user to the onboarding flow if the flag is true.

Example (React with React Router):

import { useEffect, useNavigate } from 'react-router-dom';

function LoginSuccess() {
  const navigate = useNavigate();

  useEffect(() => {
    const fetchUserProfile = async () => {
      const response = await fetch('/api/user/profile');
      const user = await response.json();
      const shouldShowOnboarding = user.is_first_login && !user.onboarding_completed;
      
      if (shouldShowOnboarding) {
        navigate('/onboarding');
      } else {
        navigate('/dashboard');
      }
    };

    fetchUserProfile();
  }, [navigate]);

  return <div>Loading...</div>;
}

3. Cookie/JWT Token Payload #

If you want to avoid an extra API call after login:

• Embed the calculated should_show_onboarding flag (or the two raw status fields) in a secure cookie or JWT token payload when returning the login response.
• Note: If you use JWT, remember it’s immutable—so after the user completes onboarding, you’ll need to generate a new token with the flag set to false, or validate the actual database state on subsequent requests.

• Always trust the backend: Never rely solely on frontend-stored state (like local storage) to decide whether to show onboarding. Users can easily modify frontend values. Always validate the database state on each request that checks the onboarding trigger.
• Update state on completion: When the user finishes the multi-step setup, make sure your backend updates the onboarding_completed field to true immediately—regardless of the is_first_login status.
• Handle edge cases: If a user starts onboarding but abandons it (e.g., closes the browser), the next login should still trigger the flow since onboarding_completed is still false.

CREATE TABLE users (
  id INT PRIMARY KEY AUTO_INCREMENT,
  email VARCHAR(255) UNIQUE NOT NULL,
  password_hash VARCHAR(255) NOT NULL,
  is_first_login BOOLEAN DEFAULT TRUE,
  onboarding_completed BOOLEAN DEFAULT FALSE
);

When the user completes onboarding, run this update:

UPDATE users SET onboarding_completed = TRUE WHERE id = ?;

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