Flutter 使用GetX时如何进行路由拦截

目录

问题描述

需要对路由进行拦截，比方说在跳转某些页面之前必须先登录了才可以，所以需要点击的时候跳转登录页，而这里我使用了GetX管理路由，想了一段时间才实现了路由的拦截

问题解决

由于我是使用的GetX（https://pub.dev/packages/get）来进行路由管理的，因此我使用的GetMaterialApp

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late SPUtil spUtils;
  @override
  void initState() {
    SPUtil.getInstance().then((value) =>
      spUtils = value
    );
  }
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          iconTheme: IconThemeData(color: Colors.black) //用于Icon颜色
      ),
      //注册路由表
      initialRoute: PageNameData.PAGE_MAIN,
      routingCallback: (routing) {
        if(routing?.current != '/'){
          // Get.removeRoute(routing!.route!);
        }
      },
      getPages: [
        GetPage(
            name: PageNameData.PAGE_MAIN,
            page: () => getPage(PageNameData.PAGE_MAIN),
            transition: PageStyleData.transition
        ),
        GetPage(
            name: PageNameData.PAGE_LOGIN,
            page: ()=>getPage(PageNameData.PAGE_LOGIN),
            transition: PageStyleData.transition
        ),
        GetPage(
            name: PageNameData.PAGE_DRVICEINFO,
            page: () => getPage(PageNameData.PAGE_DRVICEINFO),
            transition: PageStyleData.transition
        ),
        GetPage(
            name: PageNameData.PAGE_ADDDRVICE,
            page: () => getPage(PageNameData.PAGE_ADDDRVICE),
            transition: PageStyleData.transition
        ),
        GetPage(
            name: PageNameData.PAGE_ADDDEVICESCANPAGE,
            page: () => getPage(PageNameData.PAGE_ADDDEVICESCANPAGE),
            transition: PageStyleData.transition
        ),
        GetPage(
            name: PageNameData.PAGE_SCANQRCODEPAGE,
            page: () => getPage(PageNameData.PAGE_SCANQRCODEPAGE),
            transition: PageStyleData.transition
        ),
      ],
    );
  }

  Widget getPage(String pageName){
    //没有登录，跳转登录页面
    if(spUtils.getToken(defaultValue: "") == ""){
      return LoginPage();
    }

    if(pageName == PageNameData.PAGE_ADDDRVICE){
      return AddDevicePage();
    }else if(pageName == PageNameData.PAGE_DRVICEINFO){
      return DeviceInfoPage();
    }else if(pageName == PageNameData.PAGE_LOGIN){
      return LoginPage();
    }else if(pageName == PageNameData.PAGE_ADDDEVICESCANPAGE){
      return AddDeviceScanPage();
    }else if(pageName == PageNameData.PAGE_SCANQRCODEPAGE){
      return ScanQrCodePage();
    }else if(pageName == PageNameData.PAGE_MAIN){
      return MainPage();
    }

    return MainPage();

  }
}

GetX中使用getPages来配置路由，这里我就通过修改GetPage返回page的方法来实现路由的拦截

Widget getPage(String pageName){
    //没有登录（Token为空），跳转登录页面
    if(spUtils.getToken(defaultValue: "") == ""){
      return LoginPage();
    }

    if(pageName == PageNameData.PAGE_ADDDRVICE){
      return AddDevicePage();
    }else if(pageName == PageNameData.PAGE_DRVICEINFO){
      return DeviceInfoPage();
    }else if(pageName == PageNameData.PAGE_LOGIN){
      return LoginPage();
    }else if(pageName == PageNameData.PAGE_ADDDEVICESCANPAGE){
      return AddDeviceScanPage();
    }else if(pageName == PageNameData.PAGE_SCANQRCODEPAGE){
      return ScanQrCodePage();
    }else if(pageName == PageNameData.PAGE_MAIN){
      return MainPage();
    }

    return MainPage();

  }