在 Flutter 中创建私有路由

Question

如何对我的私有路由进行包装，只有当用户获得授权时才会导航到屏幕，否则重定向到登录并在登录后返回到原始屏幕。如何以通用方式制作它，以便我可以在我的其他私人未来屏幕上重复使用它？

Answer 1

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

使用 bloc 模式或 bloc 库进行更好的状态管理。希望对您有所帮助。

Answer 2

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

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 3

笼统的想法，你可以让控制器成为一个静态变量

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();
}

在 Flutter 中创建私有路由

Making Private Route in Flutter

dart

flutter

flutter-redux