flutter - 在 Flutter 中创建私有路由

Question

如何在我的私有路由上创建一个包装器，仅当用户被授权时才导航到屏幕，否则重定向到登录并在登录后返回原始屏幕。如何以一种通用的方式实现这一点，以便我在其他私人未来屏幕上重复使用它？

Answer 1

如果您在 中使用routes参数MaterialApp，则可以将其替换为以下实现

import 'dart:collection';

import 'package:flutter/widgets.dart';

class ConditionalRouter extends MapMixin<String, WidgetBuilder> {
  final Map<String, WidgetBuilder> public;
  final Map<String, WidgetBuilder> private;

  ConditionalRouter({this.public, this.private});

  @override
  WidgetBuilder operator [](Object key) {
    if (public.containsKey(key))
      return public[key];
    if (private.containsKey(key)) {
      if (MyAuth.isUserLoggedIn)
        return private[key];
      // Adding next page parameter to your Login page
      // will allow you to go back to page, that user were going to
      return (context) => LoginPage(nextPage: key);
    }
    return null;
  }

  @override
  void operator []=(key, value) {}

  @override
  void clear() {}

  @override
  Iterable<String> get keys {
    final set = Set<String>();
    set.addAll(public.keys);
    set.addAll(private.keys);
    return set;
  }

  @override
  WidgetBuilder remove(Object key) {
    return public[key] ?? private[key];
  }
}

并像这样使用它：

MaterialApp(
  // ...
  routes: ConditionalRouter(
    public: {
      '/start_page': (context) => StartPage()
    },
    private: {
      '/user_profile': (context) => UserProfilePage()
    }
  )
)

Answer 2

广义的想法，您可以使控制器成为静态变量

class LoginController{
  final Function onContactingServerDone;
  LoginController({this.onContactingServerDone,});

  bool loggedIn;

  login()async {
    //contact server,get token or verify token etc

    onContactingServerDone();
  }
}

在你的屏幕上

LoginController _loginController;
initState(){
  _loginController = LoginController(onContactingServerDone: (){
    if(_loginController.loggedIn){
      Navigator.of(context).pushNamed('privateRoute');
    } else {
      Navigator.of(context).pushNamed('login');
    }
  },);
  _loginController.login();
}

Widget build(context){
  return CircularProgressIndicator();
}

Answer 3

StreamBuilder如果没有数据，则使用小部件并为其提供访问令牌/uid 流，然后返回登录屏幕，当用户通过身份验证时，然后将访问令牌放入流中，该流将重建 StreamBuilder，当用户通过身份验证时返回页面。

使用 bloc 模式或 bloc 库进行更好的状态管理。希望这会帮助你。