基于Flutter Bloc实现电商应用访客功能：未登录直接进入首页，结账时触发登录

Hey there! I’ve built similar e-commerce flows before, so let’s walk through how to set this up with Flutter Bloc. The core idea is letting users browse freely until they need to check out—then gating that action behind login. Let’s break it down step by step.

1. Define Auth States & Events #

First, we need to model the authentication states our app can be in, plus the events that trigger state changes.

AuthState #

We’ll need three core states to track user auth status:

• AuthInitial: The default starting state before we verify if a user is logged in
• AuthAuthenticated: User has a valid session (logged in)
• AuthUnauthenticated: User is not logged in

abstract class AuthState extends Equatable {
  const AuthState();

  @override
  List<Object> get props => [];
}

class AuthInitial extends AuthState {}

class AuthAuthenticated extends AuthState {
  final User user; // Replace with your app's user model
  const AuthAuthenticated(this.user);

  @override
  List<Object> get props => [user];
}

class AuthUnauthenticated extends AuthState {}

AuthEvent #

Events will handle checking initial auth status, successful login, and logout:

abstract class AuthEvent extends Equatable {
  const AuthEvent();

  @override
  List<Object> get props => [];
}

class CheckAuthStatus extends AuthEvent {}

class LoginSuccess extends AuthEvent {
  final User user;
  const LoginSuccess(this.user);

  @override
  List<Object> get props => [user];
}

class LogoutRequested extends AuthEvent {}

2. Build the AuthBloc #

This bloc will handle the business logic for authentication checks and state transitions. We’ll use local storage (like SharedPreferences) to persist login state between app sessions.

class AuthBloc extends Bloc<AuthEvent, AuthState> {
  final SharedPreferences prefs;
  // Optional: Inject an auth repository here for API calls

  AuthBloc({required this.prefs}) : super(AuthInitial()) {
    on<CheckAuthStatus>(_onCheckAuthStatus);
    on<LoginSuccess>(_onLoginSuccess);
    on<LogoutRequested>(_onLogoutRequested);
  }

  void _onCheckAuthStatus(CheckAuthStatus event, Emitter<AuthState> emit) async {
    // Check if we have a saved user token/session in local storage
    final String? token = prefs.getString('user_token');
    final User? savedUser = _parseSavedUserFromPrefs(); // Your logic to load saved user data

    if (token != null && savedUser != null) {
      emit(AuthAuthenticated(savedUser));
    } else {
      emit(AuthUnauthenticated());
    }
  }

  void _onLoginSuccess(LoginSuccess event, Emitter<AuthState> emit) async {
    // Save user data to local storage for persistence
    await prefs.setString('user_token', event.user.token);
    await prefs.setString('user_data', jsonEncode(event.user.toJson()));
    emit(AuthAuthenticated(event.user));
  }

  void _onLogoutRequested(LogoutRequested event, Emitter<AuthState> emit) async {
    // Clear local storage when user logs out
    await prefs.remove('user_token');
    await prefs.remove('user_data');
    emit(AuthUnauthenticated());
  }

  User? _parseSavedUserFromPrefs() {
    // Add your logic to decode saved user JSON from SharedPreferences
    final String? userJson = prefs.getString('user_data');
    return userJson != null ? User.fromJson(jsonDecode(userJson)) : null;
  }
}

3. Initialize the Bloc on App Start #

In your main.dart, initialize the AuthBloc and trigger the initial auth status check when the app launches:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final prefs = await SharedPreferences.getInstance();
  
  runApp(
    BlocProvider(
      create: (context) => AuthBloc(prefs: prefs)..add(CheckAuthStatus()),
      child: const MyApp(),
    ),
  );
}

4. Implement the UI Flow #

Home Screen (Default Entry Point) #

The home screen is accessible to everyone—no login required. Add your checkout button with logic to check the auth state before navigating:

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Your Shop')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Check current auth state before proceeding
            final authState = context.read<AuthBloc>().state;
            if (authState is AuthAuthenticated) {
              // User is logged in: go straight to checkout
              Navigator.push(context, MaterialPageRoute(builder: (_) => const CheckoutScreen()));
            } else {
              // User is not logged in: redirect to login
              Navigator.push(context, MaterialPageRoute(builder: (_) => const LoginScreen()));
            }
          },
          child: const Text('Proceed to Checkout'),
        ),
      ),
    );
  }
}

Login Screen #

After successful login, dispatch the LoginSuccess event to update the bloc state, then navigate back to checkout:

class LoginScreen extends StatelessWidget {
  const LoginScreen({super.key});

  Future<void> _performLogin(BuildContext context) async {
    // Replace with your actual login API call logic
    final User loggedInUser = await AuthRepository.login(
      email: 'user@example.com',
      password: 'password123',
    );
    
    // Update the bloc state to reflect successful login
    context.read<AuthBloc>().add(LoginSuccess(loggedInUser));
    
    // Navigate back to checkout (replace login screen with checkout)
    Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => const CheckoutScreen()));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Login to Checkout')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Add your email/password fields here
            ElevatedButton(
              onPressed: () => _performLogin(context),
              child: const Text('Login'),
            ),
          ],
        ),
      ),
    );
  }
}

Optional: Auto-Redirect with BlocListener #

If you want to automatically redirect to checkout once login succeeds, add a BlocListener to your login screen:

// Inside LoginScreen's build method
BlocListener<AuthBloc, AuthState>(
  listener: (context, state) {
    if (state is AuthAuthenticated) {
      Navigator.pushReplacement(context, MaterialPageRoute(builder: (_) => const CheckoutScreen()));
    }
  },
  child: // Your login form widgets
)

Key Notes #

• Guest Browsing: The home screen is always accessible—no auth check on app launch.
• Checkout Gate: Login is only required when the user attempts to check out.
• State Persistence: Using SharedPreferences ensures users stay logged in between app restarts.

That’s it! This setup gives you the exact flow you’re looking for—seamless guest browsing with login only when necessary.

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