使用导航处理 Flutter 中的身份验证状态

Question

我正在使用 Google 登录来处理 Flutter 应用中的用户身份验证。这对于单视图应用程序（无路由）非常有用，但是一旦我尝试添加一些路由并有效地管理路由，事情就会变得非常棘手。

如果我错了，请纠正我，但我认为我想要的是顶层的有状态小部件，它控制我的登录变量和身份验证方法。这个顶级有状态小部件还控制我的路由。以下是我当前设置的一些 sn-ps：

class SignInState extends State<SignIn> {
  GoogleSignInAccount _currentUser;
  ...

  Future<Null> _handleSignIn() async {
    try {
      await _googleSignIn.signIn();
    } catch (error) {
      print(error);
    }
  }

  Future<Null> _handleSignOut() async {
    _googleSignIn.disconnect();
  } 

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: _pageTitle,
      home: new Home(),
      routes: <String, WidgetBuilder> {
        "/": (BuildContext context) => new Home(),
        "/settings": (BuildContext context) => new Settings(),
        "/login": (BuildContext context) => new Login()
      },
      ...
    );
  }
}

我在这里的假设是我的状态会被传递到嵌套的小部件中，但我没有在 Home() 中看到 _currentUser 变量。

在其他框架中，您可以指定在路由加载时运行的方法，如果有一种优雅的方法可以在加载路由之前检查 _currentUser 是否存在，这样我就可以在用户不存在时推送新路由已登录。

如果有人有在 Flutter 应用程序中结合路由和身份验证的经验，我会非常感谢朝着正确方向迈出的一步。我发现的大多数教程都是针对其中的一个。

谢谢！

Answer 1

如果您将SignIn 小部件设为InheritedWidget，并向其中添加一些包含您的用户状态的属性（比如说userState），您可以向其添加这样的方法：

static UserState of(BuildContext context, { bool nullOk: false }) {
    assert(context != null);
    assert(nullOk != null);
    final SignIn signInWidget = context.inheritFromWidgetOfExactType(SignIn);
    if (signInWidget != null)
      return signInWidget.userState;
    if (nullOk)
      return null;
    throw new FlutterError(
      'Attempted to find UserState without a SignInWidget parent.\n'
      'The context used was:\n'
      '  $context'
    );
}

然后你就可以打电话了

SignIn.of(context)

在你的路线上获取UserState。

还有其他方法可以做到这一点 - 例如，将您的数据放在 redux 存储中，或创建回调链（例如，在您的 SignInWidget 上公开一个回调，该回调将传递给子路由）。这可能是最干净的内置方式，尤其是如果您打算让这个小部件无论如何都存在于树的顶部 - 但是如果您采用其他一些状态管理策略（例如使用 redux），您可能会想考虑使用它。

Answer 2

如何添加：

static Widget checkAuth(Widget page) {
    if (currentUser == null) {
        return Login();
    } else {
        return page;
    }
}
...

  routes: <String, WidgetBuilder> {
    "/": (BuildContext context) => checkAuth(Home()),
    "/settings": (BuildContext context) => checkAuth(Settings()),
    "/login": (BuildContext context) => new Login()
  },
...