遥遥领先？Flutter项目中如何实现拦截登录再执行

Flutter项目中拦截登录的常用做法

前言

最近也是比较忙着在搞 Flutter 新项目了，在我之前用 Android 开发的思路开发Flutter项目的指导下没什么大问题。

直到最近出现这么一个登陆拦截的问题。可能很多人没这方面的需求，不是很了解。两个痛点！一个是如何拦截各种场景与监听的拦截，一个是如何拦截完成之后再次执行的问题。

拦截？简单！这不是用 Flutter 的路由拦截器就能实现的逻辑吗？

类似如果我们使用 GetX 框架来管理的路由，大致如下实现：

class AuthMiddleware extends GetMiddleware {
  @override
  RouteSettings? redirect(String? route) {
    // 判断用户是否已登录
    bool isLoggedIn = checkIfUserIsLoggedIn(); // 你需要根据实际情况来实现该方法

    if (!isLoggedIn) {
      // 用户未登录，重定向到登录页面
      return RouteSettings(name: '/login');
    }

    // 用户已登录，继续正常跳转
    return null;
  }
}

然后注入到容器中即可使用，通过以上配置，当进行路由跳转时，AuthMiddleware 中的登录拦截逻辑会自动触发。如果用户未登录，则会重定向到指定的登录页面；如果用户已登录，则会正常进行路由跳转。

但是这种通过路由拦截的方式，有很大的局限性，它只能拦截通过 Get.to、Get.off、Get.toNamed 等 GetX 路由方法进行的页面跳转。当你直接使用构造函数创建的页面时，不会触发 GetX 的路由系统，因此 GetMiddleware 无法拦截这种情况。

无法理解？

比如首页的底部5个Tab,只有首页能支持游客模式，而点击其他Tab的时候要拦截未登录。或者 PageView 滚动的时候只有第一个Page是支持游客模式，滑动到其他Page 就需要拦截未登录。再或者在首页的列表 ListView 滚动到一定的阈值需要拦截未登录。

要知道这些方式的拦截可并不走路由的。并且就算是正常的按钮点击跳转到路由，走到路由了，使用路由的拦截方式也只能做到拦截不能支持再执行的效果，还是需要再次点击按钮触发才行。

其中类似的效果如 Rxbool 之类的监听：

class AuthController extends GetxController {
  RxBool _isLoggedIn = false.obs;

  bool get isLoggedIn => _isLoggedIn.value;

  set isLoggedIn(bool value) {
    _isLoggedIn.value = value;
  }
}

也是类似的效果，确实是能做到监听，但是无法做到再执行的效果。而我们需要最终实现的效果如下：

那么到底最后有哪些方式能实现这种效果呢？

一、Future 的等待

其实在去年我写过 Android 的登录拦截与转发的几种方式，这里吸取其中几种思路，我们就能实现类似的效果。

类似 Kotlin 协程的做法，我们可以用 Dart 中的 Completer 对象来实现。

Completer 是 Dart 中的一个类，用于处理异步操作的完成通知。Completer 提供了一个 future 属性，该属性是一个 Future 对象，调用者可以监听该 Future 对象来获取异步操作的结果。

class LoginInterceptThreadManager {
  static LoginInterceptThreadManager? _threadManager;
  static Completer<bool>? _completer;

  LoginInterceptThreadManager._();

  static LoginInterceptThreadManager get() {
    _threadManager ??= LoginInterceptThreadManager._();
    return _threadManager!;
  }

  void checkLogin(void Function() nextRunnable) {
    if (LoginInterceptChain.isLogin()) {
      // 已经登录
      nextRunnable();
      return;
    }

    // 如果没有登录-先去登录页面
    LoginPage.startInstance();

    // 等待登录完成
    _completer = Completer<bool>();
    _completer?.future.then((result) {
      if (LoginInterceptChain.isLogin()) {
        // 已经登录
        nextRunnable();

        _completer = null;
      }
    });
  }

  // 设置登录完成
  void loginFinished() {
    _completer?.complete(true);
  }

}

在 checkLogin 方法中，首先创建了一个 Completer 对象 _completer，然后将其 future 属性（即 _completer?.future）传递给 then 方法，以添加一个监听器。当 _completer 的 complete 方法被调用时，该监听器会被触发，进而执行相应的逻辑。

在 loginFinished 方法中，调用 _completer?.complete(true) 来完成异步操作，并将结果设置为 true。这将触发之前通过 then 方法添加的监听器，并执行后续的操作。

使用的时候：

比如切换到其他Tab的时候做拦截

void _selectPositionEvent(int position) {
    if (position != state.tabIndex) {
      if (position > 0) {
        LoginInterceptThreadManager.get().checkLogin(() {
          //监听事件,正常切换Tab页面
          _pageController.jumpToPage(position);

          setState(() {
            //状态更新
            state.tabIndex = position;
          });
        });
      }
    } else {
      //如果是重复点击
      switch (position) {
        case 0:
          Log.d('重复点击索引0');
          break;
        case 1:
          Log.d('重复点击索引1');
          break;
        case 2:
          Log.d('重复点击索引2');
          break;
        case 3:
          Log.d('重复点击索引3');
          break;
        case 4:
          Log.d('重复点击索引4');
          if (isPageLoadedList[position]) {
            Get.find<MeController>().forceRefreshPage();
          }
          break;
      }
    }
  }

在登录完成之后需要处理登录完成的逻辑。

void doLogin() {


    ... //调用接口完成

    StorageService.getInstance().setString(AppConstant.storageToken,"abc123");

    LoginInterceptThreadManager.get().loginFinished();

    Get.back();
  }

二、新线程 Isolate 的通知

除了上述的方法，我们还能模仿实现 Java 的线程等待唤醒的逻辑实现类似的功能，我们可以用 Dart 开启新的线程 Isolate。然后通过 SendPort 与 receivePort 等结合起来实现。

class LoginInterceptThreadManager2 {
  static LoginInterceptThreadManager2? _threadManager;

  late StreamSubscription _subscription;
  static Isolate? _isolate;
  static SendPort? _sendPort;

  LoginInterceptThreadManager2._();

  static LoginInterceptThreadManager2 get() {
    _threadManager ??= LoginInterceptThreadManager2._();
    return _threadManager!;
  }

  void checkLogin(void Function() nextRunnable) {
    if (LoginInterceptChain.isLogin()) {
      // 已经登录
      nextRunnable();
      return;
    }

    // 如果没有登录-先去登录页面
    LoginPage.startInstance();


    // 启动 Isolate 并等待登录完成
    final receivePort = ReceivePort();
    Isolate.spawn(_isolateEntry, receivePort.sendPort).then((isolate) {
      _isolate = isolate;
      _sendPort = receivePort.sendPort;
    });

    _subscription = receivePort.listen((result) {

      if (LoginInterceptChain.isLogin()) {
        // 已经登录
        _subscription.cancel();
        _isolate?.kill(priority: Isolate.immediate);

        nextRunnable();
      }
    });
  }

  static void _isolateEntry(SendPort sendPort) {
    final receivePort = ReceivePort();
    sendPort.send(receivePort.sendPort);

    receivePort.listen((_) {
      if (LoginInterceptChain.isLogin()) {
        sendPort.send(true);
      }
    });
  }

  // 设置登录完成
  static void loginFinished() {
    _sendPort?.send(true);
  }

}

整体流程是通过启动一个 Isolate 来执行异步操作，并使用 SendPort 和 ReceivePort 进行主 Isolate 与子 Isolate 之间的消息传递，从而实现了异步操作的管理和通知。

具体的使用与上述代码类似：

  void gotoProfilePage() {

    LoginInterceptThreadManager2.get().checkLogin(() {

      SmartDialog.showToast('已经登录了-去个人中心吧2');

      StorageService.getInstance().remove(AppConstant.storageToken);
    });
  }

登录页面的处理：

void doLogin() {


    ... //调用接口完成

    StorageService.getInstance().setString(AppConstant.storageToken,"abc123");

    LoginInterceptThreadManager2.loginFinished();

    Get.back();
  }

三、拦截器模式

没想到吧，Android 中常用的拦截器模式一样能在 Dart/Flutter 中使用。

因为它只是一种设计思想，不限制于语言与平台。在 Android 中的使用方式换成 Dart 语法实现之后在 Flutter 中一样好用。

我们可以定义两个固定的拦截器，一个是登录拦截的拦截器，用于拦截是否登录并且跳转到登录页面。完成登录之后我们就放行拦截器，走到下一个拦截器是具体的执行操作拦截器。从而实现登录的拦截与再执行效果。

由于内部的判断都是基于是否登录来判断的，所以我们实现一个简单的拦截器链即可，可以不通过值传递的方式来实现。

先定义拦截器和基类的实现：

abstract class Interceptor {
  void intercept(LoginInterceptChain chain);
}

abstract class BaseLoginInterceptImpl implements Interceptor {

  LoginInterceptChain? mChain;

  @override
  void intercept(LoginInterceptChain chain) {
    mChain = chain;
  }

}

然后我们定义两个固定的拦截器一个是登录拦截器，一个是继续执行拦截器：

class LoginInterceptor extends BaseLoginInterceptImpl {
  @override
  void intercept(LoginInterceptChain chain) {
    super.intercept(chain);

    if (LoginInterceptChain.isLogin()) {
      // 如果已经登录 -> 放行，转交给下一个拦截器
      chain.process();
    } else {
      // 如果未登录 -> 去登录页面
      LoginPage.startInstance();
    }
  }

  void loginFinished() {
    // 如果登录完成，调用方法放行到下一个拦截器
    mChain?.process();
  }
}

class LoginNextInterceptor implements Interceptor {

  final void Function() action;

  LoginNextInterceptor(this.action);

  @override
  void intercept(LoginInterceptChain chain) {
    if (LoginInterceptChain.isLogin()) {
      // 如果已经登录执行当前的任务
      action();
    }

    chain.process();
  }
}

最后我们通过一个管理类来统一处理：

class LoginInterceptChain {
  int index = 0;
  List<Interceptor> _interceptors = [];
  late LoginInterceptor _loginIntercept;

  // 私有构造函数
  LoginInterceptChain._() {
    // 默认初始化Login的拦截器
    _loginIntercept = LoginInterceptor();
  }

  // 单例实例
  static final LoginInterceptChain _instance = LoginInterceptChain._();

  // 获取单例实例
  factory LoginInterceptChain() {
    return _instance;
  }

  // 执行拦截器
  void process() {
    if (_interceptors.isEmpty) return;

    if (index < _interceptors.length) {
      Interceptor interceptor = _interceptors[index];
      index++;
      interceptor.intercept(this);

    } else if (index == _interceptors.length) {
      clearAllInterceptors();
    }

  }

  // 添加默认的再执行拦截器
  LoginInterceptChain addInterceptor(Interceptor interceptor) {
    // 默认添加Login判断的拦截器
    if (!_interceptors.contains(_loginIntercept)) {
      _interceptors.add(_loginIntercept);
    }

    if (!_interceptors.contains(interceptor)) {
      _interceptors.add(interceptor);
    }

    return this;
  }

  // 放行登录判断拦截器
  void loginFinished() {
    if (_interceptors.contains(_loginIntercept) && _interceptors.length > 1) {
      _loginIntercept.loginFinished();
    }
  }

  // 清除全部的拦截器
  void clearAllInterceptors() {
    index = 0;
    _interceptors.clear();
  }

  // 是否已经登录
  static bool isLogin() {
    String token = StorageService.getInstance().getString(AppConstant.storageToken);
    return !TextUtil.isEmpty(token);
  }


}

使用起来差别其实也不大：

  void gotoProfilePage() {
   
     LoginInterceptChain chain = LoginInterceptChain();
    
     chain.addInterceptor(LoginNextInterceptor((){
    
       SmartDialog.showToast('已经登录了-去个人中心吧');
    
       StorageService.getInstance().remove(AppConstant.storageToken);
    
     })).process();
  }

登录的处理：

void doLogin() {

    ... //调用接口完成

    StorageService.getInstance().setString(AppConstant.storageToken,"abc123");

    LoginInterceptChain().loginFinished();

    Get.back();
  }

三者实现最终的效果是一致的，这里就不反复的贴图。

总结

通过上面的几种方式（不限于这些方式还有很多其他方式）我们就可以脱离框架层面，不需要定义路由拦截或者每一个地方手写判断。或者一些拦截不走路由等等各种情况的统一管理。

只需要实现一处代码，可以达到统一拦截的效果。

以上的这几种方式总的分两种思路，一种通过线程，Future等方法的通知与回调处理，一种是通过拦截器的模式来处理。你 pick 哪一种。

iOS同事觉得拦截器的方式也太妙了，哎，属实是少见多怪了，Android开发也太卷了其中一些开发设计思路感觉遥遥领先（点个题开个玩笑）。拿出一点用在 Flutte 中受用无穷。😂

所以我们后面还是用选用的 Completer 的方式，感觉也蛮轻量挺好用的。😅

代码比较简单都已经在文中贴出。

如果本文的讲解有什么错漏的地方，希望同学们一定要指出哦。有疑问也可以评论区交流学习进步，谢谢！

当然如果觉得本文还不错对你有些帮助的话，还请点赞支持一下哦，你的支持是我最大的动力啦！

Ok,这一期就此完结。