Flutter 安全存储更改路由

Question

我已经在我的 flutter 项目中成功实现了 flutter_secure_storage，当用户写下他的电子邮件和密码时，它就会被存储，但这是我不明白的地方。我应该如何设置屏幕路由取决于用户是否已经登录。如果是同一个用户，那么username和pass存放在secure_storage，我想让他直接去HomeScreen()，但是如果有新用户需要登录，那么就有就是secure_storage里面没有数据，那我要他发到LoginScreen()。到目前为止我已经这样做了：

import 'dart:async';
import 'package:flutter/material.dart';
import 'login_screen.dart';
import 'home_screen.dart';
import 'components/alarm_buttons.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';

class WelcomeScreen extends StatefulWidget {
  static const String id = 'welcome_screen';
  @override
  _WelcomeScreenState createState() => _WelcomeScreenState();
}

class _WelcomeScreenState extends State<WelcomeScreen> {
  void readData() async {
    final storage = FlutterSecureStorage();
    String myPassword = await storage.read(key: "p");
    String myEmail = await storage.read(key: "e");
    print(myEmail);
    print(myPassword);
  }

  @override
  void initState() {
    final storage = FlutterSecureStorage();
    Timer(
        Duration(seconds: 2),
        () => Navigator.pushNamed(
              context,
              storage == null ? LoginScreen.id : HomePage.id,
            ));
    readData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: 24.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            AlarmButtons(
              buttonColour: Colors.grey,
              buttonText: 'Log In',
              buttonTextColour: Colors.white,
              onButtonPress: () {
                Navigator.pushNamed(context, LoginScreen.id);
              },
            ),
            AlarmButtons(
              buttonColour: Colors.white,
              buttonText: 'Sign up',
              buttonTextColour: Colors.grey,
              onButtonPress: () {
                Navigator.pushNamed(context, SignUpScreen.id);
              },
            ),
          ],
        ),
      ),
    );
  }
}

现在，当我想 return 进入欢迎屏幕（上面显示的我的应用程序的起始页面）时，问题就开始了，自然会再次触发 initState，然后我回到 HomePage()再次。我该如何处理它，仅在应用程序启动时触发该 initState，因此在自动登录后我可以 return 进入欢迎屏幕而不触发它？

提前致谢！

Answer 1

您应该首先启动 SplashScreen（或您的情况下为 WelcomeScreen）之类的东西。在那里，您可以根据保存的数据决定要导航到哪个屏幕。示例：

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

  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    _startApp();
    super.initState();
  }

  Future<void> _startApp() async {
    final storage = FlutterSecureStorage();
    String myEmail = await storage.read(key: "e");
    if (myEmail == null) {
      // TODO Navigate to Login Screen
    } else {
      // TODO Navigate to Home Screen
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Splashscreen"),
      ),
    );
  }
}

Flutter 安全存储更改路由

Flutter Secure Storage Change Route

mobile

storage

flutter

flutter-dependencies