Flutter Web中如何启动基础URL并提取URL中的ID

一、先解决404路由错误 #

Flutter Web是单页应用（SPA），服务器默认会把带路径的请求当成静态资源查找，导致扫码访问http://example.ae/a23bc时返回404。需要配置服务器将所有请求重定向到index.html，交给Flutter客户端路由处理。

Nginx配置示例 #

在Nginx的server块中添加：

location / {
  try_files $uri $uri/ /index.html;
}

Apache配置示例 #

在项目根目录的.htaccess文件中添加：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

二、提取门店ID并跳转基础URL #

在应用启动阶段捕获当前URL，提取门店ID后跳转到基础URL，同时保存ID供后续使用。

方案1：启动时直接处理（推荐） #

通过dart:html操作浏览器URL，在main函数中完成提取、保存和跳转：

import 'dart:html';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 解析当前URL
  final currentUri = Uri.parse(window.location.href);
  String? storeId;

  // 提取路径中的门店ID（比如路径为/a23bc，取第一个路径段）
  if (currentUri.pathSegments.isNotEmpty) {
    storeId = currentUri.pathSegments.first;
    // 可选：验证ID格式（比如检查长度、字符规则）
    if (storeId.length == 5) {
      // 保存ID到本地存储
      final prefs = await SharedPreferences.getInstance();
      await prefs.setString('store_id', storeId);
    }
  }

  // 跳转到基础URL（移除路径部分）
  if (storeId != null) {
    window.location.replace('${currentUri.scheme}://${currentUri.host}');
  }

  runApp(const MyApp());
}

方案2：路由拦截处理 #

如果不想直接操作浏览器URL，可通过Flutter路由系统拦截未知路由：

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '门店应用',
      onGenerateRoute: (settings) {
        // 拦截非首页的路由
        if (settings.name != '/') {
          final storeId = settings.name?.substring(1); // 去掉路径开头的/
          if (storeId?.isNotEmpty == true) {
            // 异步保存ID
            SharedPreferences.getInstance().then((prefs) {
              prefs.setString('store_id', storeId!);
            });
          }
          // 强制跳转到首页
          return MaterialPageRoute(builder: (_) => const HomePage());
        }
        // 正常返回首页路由
        return MaterialPageRoute(builder: (_) => const HomePage());
      },
      home: const HomePage(),
    );
  }
}

三、后续使用门店ID #

在登录或需要调用API的地方，直接从本地存储读取ID即可：

Future<String?> getStoreId() async {
  final prefs = await SharedPreferences.getInstance();
  return prefs.getString('store_id');
}

// 调用示例：获取门店数据
void fetchStoreData() async {
  final storeId = await getStoreId();
  if (storeId != null) {
    // 发起API请求
    // final response = await http.get(Uri.parse('https://example.ae/api/store/$storeId'));
  }
}

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