在 Flutter 中收到令牌后导航到主屏幕答案

【问题标题】：Navigate to Home screen after receiving token in Flutter在 Flutter 中收到令牌后导航到主屏幕
【发布时间】：2020-11-13 07:34:09
【问题描述】：

我正在尝试实现用户身份验证。为了让用户登录，我创建了一个名为 Auth 的 Provider：

import 'dart:convert';

import 'package:flutter/foundation.dart';
import 'package:http/http.dart' as http;
import '../../utilities/http_exception.dart';

class Auth extends ChangeNotifier {
  String _userId;
  String _userUUID;
  String _token;
  DateTime _expiryDate;

  bool get isAuth {
    return token != null;
  }

  String get token {
    if (_token != null) {
      return _token;
    }
    return null;
  }

  Future<void> login(String email, String password) async {
    const String url = "http://10.0.2.2:8000/users/api/token/";
    try {
      final response = await http.post(
        url,
        headers: {"Content-Type": "application/json"},
        body: json.encode(
          {
            "email": email,
            "password": password,
          },
        ),
      );
      final responseData = json.decode(response.body);
      if (response.statusCode == 200 && responseData["token"] != null) {
        _token = responseData["token"];
        _userUUID = responseData["user"]["uuid"];
        notifyListeners();
      } else {
        print("SOMETHING WENT WRONG HERE");
      }
    } catch (e) {
      throw e;
    }
  }
}

如你所见，我调用了 notifyListeners() 来通知监听器进行一些操作。

什么样的操作？

我在我的 MateriaApp 小部件周围使用了 Consumer，对于 home 参数，我检查了天气，令牌是否为空。如果为空，则加载 GeneralAuth 屏幕，否则加载主屏幕。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return OrientationBuilder(
          builder: (context, orientation) {
            return MultiProvider(
              providers: [
                ChangeNotifierProvider.value(value: Auth()),
                ChangeNotifierProvider.value(value: Users()),
                ChangeNotifierProvider.value(value: Teachers()),
              ],
              child: Consumer<Auth>(
                builder: (context, auth, _) => MaterialApp(
                  debugShowCheckedModeBanner: false,
                  localizationsDelegates: [
                    GlobalMaterialLocalizations.delegate,
                    GlobalWidgetsLocalizations.delegate
                  ],
                  supportedLocales: [Locale("fa", "IR")],
                  onGenerateRoute: Router.generateRoute,
                  initialRoute: GeneralAuthRoute,
                  onUnknownRoute: (settings) => MaterialPageRoute(
                    builder: (context) => Undefined(name: settings.name),
                  ),
                  locale: Locale("fa", "IR"),
                  theme: ThemeData(
                    fontFamily: "IranSans",
                    primaryColor: Color(0xFF212121),
                    bottomSheetTheme: BottomSheetThemeData(
                      backgroundColor: Colors.black.withOpacity(0),
                    ),
                  ),
                  home: auth.isAuth ? Home() : GeneralAuth(),
                ),
              ),
            );
          },
        );
      },
    );
  }
}

看起来一切正常，因为正如我所说，我调用了 notifyListeners() 但在收到令牌后，即使我有令牌并且auth.isAuth 返回 true，屏幕也不会加载。

有什么问题？

【问题讨论】：

标签： flutter dart

【解决方案1】：

Home 属性不会动态地改变你的屏幕，这种行为是意料之中的。您需要做的是您需要遵循等待 login 端点执行的逻辑，并根据您获得的响应，您需要决定显示的屏幕。

示例如下：

await login('a@a.com', '12345');
if (Auth.isAuth) {
  // Present here Home screen
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => Home()),
  );
}

【讨论】：