微前端架构下，同一服务器部署的两个Flutter Web应用（登录↔主页）间的页面导航及正确登出处理方案

兄弟，我懂你现在的痛点——两个独立打包的Flutter Web应用部署在同一服务器的不同路由下，要搞定登录到主页的顺畅跳转，还有登出后正确回到登录页的完整逻辑对吧？我给你整理几个落地性强的方案，都是实际项目里验证过的：

一、登录成功跳转到主页的实现 #

因为俩应用在同一域名下，直接用浏览器原生的地址跳转就最靠谱，完全不用搞复杂的跨域配置，简单直接：

• 方式1：用Dart调用浏览器JS API
  登录验证通过后，直接改浏览器地址栏就行，代码写起来也简单：

  import 'dart:js' as js;
  
  // 登录逻辑校验通过后执行这段
  js.context.callMethod('open', ['/home/', '_self']);
  

  这里_self是在当前窗口打开，用户完全感觉不到是两个独立应用，体验和单应用跳转一模一样。

• 方式2：用url_launcher包实现
  如果你们团队习惯用Flutter的第三方包，也可以用url_launcher，同域下直接指定替换当前页面就行：

  import 'package:url_launcher/url_launcher.dart';
  
  final homeUri = Uri.parse('/home/');
  if (await canLaunchUrl(homeUri)) {
    await launchUrl(homeUri, mode: LaunchMode.replaceCurrent);
  }
  

  这个效果和JS调用没差，看你们平时的编码习惯选就行。

二、登出的正确处理逻辑 #

登出的核心是清干净所有登录痕迹 + 跳回登录页，因为俩应用同域，浏览器的localStorage/sessionStorage是共享的，所以得同步清理：

1. 登出的三步操作 #

• 第一步：先清掉当前主页应用内的登录状态，比如Provider、Bloc里存的用户信息，或者本地的临时缓存；
• 第二步：清理共享存储里的敏感内容，比如token、会话ID这些，用Dart调用JS来操作：

  import 'dart:js' as js;
  
  // 清除localStorage里的登录相关数据
  js.context['localStorage'].callMethod('removeItem', ['auth_token']);
  js.context['localStorage'].callMethod('removeItem', ['user_session']);
  

• 第三步：跳回登录页，还是用浏览器地址跳转：

  js.context.callMethod('open', ['/login/', '_self']);
  

2. 额外优化：主页的登录态校验 #

为了防止用户手动输入主页地址直接进入（比如跳过登录页），可以在主页应用的初始化页面加个校验：

@override
void initState() {
  super.initState();
  // 页面渲染完后执行校验
  WidgetsBinding.instance.addPostFrameCallback((_) {
    _checkAuthStatus();
  });
}

void _checkAuthStatus() {
  import 'dart:js' as js;
  final authToken = js.context['localStorage'].callMethod('getItem', ['auth_token']);
  if (authToken == null || authToken.toString().isEmpty) {
    // 未登录直接跳回登录页
    js.context.callMethod('open', ['/login/', '_self']);
  }
}

这样就能把未登录的用户直接拦在外面，完善整个权限流程。

三、避坑提醒 #

• 绝对别用Flutter的Navigator来跨应用跳转！那是单应用内部的路由机制，跨应用完全不生效，必须用浏览器级别的地址跳转；
• 登录成功后，登录应用要把token存在localStorage里，主页应用初始化时读这个token做权限校验，这样俩应用的状态就能同步；
• 登出一定要清干净所有共享存储内容，不然用户重新进主页可能还能看到之前的状态，会出逻辑bug。

备注：内容来源于stack exchange，提问作者Faiz Anwar