flutter + getx 用户登录

  1. 首先,我们需要在项目中添加 getflutter_secure_storage 依赖。在 pubspec.yaml 文件中添加以下内容:
dependencies:
  flutter:
    sdk: flutter
 get: ^4.5.1 
  flutter_secure_storage: ^4.2.0
  1. 在我们的应用程序中,我们需要创建一个 UserController 类来处理用户身份验证。在 lib/controllers/user_controller.dart 文件中添加以下内容:
import 'package:flutter_secure_storage/flutter_secure_storage.dart'; 
import 'package:get/get.dart'; 

class UserController extends GetxController { 
  final storage = FlutterSecureStorage(); 
  String _token; 
  String get token => _token; 

  Future login(String email, String password) async { 
    // 这里写登录逻辑 
    // 成功登录后,保存 token 
    _token = "xxxxxxxxxxxxxx"; 
    await storage.write(key: "token", value: _token); 
    return true; 
  } 
  
  Future logout() async { 
    // 删除 token 
    await storage.delete(key: "token"); 
    _token = null; 
  } 
  
  Future checkLogin() async { 
    // 从 storage 中获取 token,判断是否已登录 
    _token = await storage.read(key: "token"); 
    return _token != null; 
  } 
  
} 
  1. 创建 LoginPage 页面,用于用户登录。在 lib/pages/login_page.dart 文件添加以下内容:
import 'package:flutter/material.dart'; 
import 'package:get/get.dart'; 
import 'package:getx_login_demo/controllers/user_controller.dart'; 

class LoginPage extends StatelessWidget { 
  
  final UserController _userController = Get.put(UserController()); 
  
  @override 
  Widget build(BuildContext context) { 
    
    return Scaffold( 
      appBar: AppBar( title: Text("登录"), ), 
      body: Center( 
        child: Column( 
          mainAxisAlignment: MainAxisAlignment.center, 
          children: [ 
            Container( 
              margin: EdgeInsets.symmetric(horizontal: 20), 
              child: TextFormField( 
                decoration: InputDecoration( labelText: "邮箱", ), 
                validator: (value) { 
                  if (value.isEmpty) { 
                    return "邮箱不能为空"; 
                  } 
                  return null; 
                }, 
              ), 
            ), 
            
            SizedBox( height: 10, ), 
            
            Container( 
              margin: EdgeInsets.symmetric(horizontal: 20), 
              child: TextFormField( 
                obscureText: true, 
                decoration: InputDecoration( labelText: "密码", ), 
                validator: (value) { 
                  if (value.isEmpty) { 
                    return "密码不能为空"; 
                  } 
                  
                  return null; 
                }, 
              ), 
            ), 
            
            SizedBox( height: 20, ), 
            
            ElevatedButton( 
              onPressed: () async { 
                var email = "test@test.com"; 
                var password = "123456"; 
                bool success = await _userController.login(email, password); 
                if (success) { 
                  Get.offAllNamed("/"); 
                } else { 
                  Get.snackbar("错误", "登录失败"); 
                } 
              }, 
              child: Text("登录"),
            ),
          ], 
        ), 
      ), 
    ); 
  } 
  
} 
  1. 创建 HomePage 页面,用于已登录用户。在 lib/pages/home_page.dart 文件添加以下内容:
import 'package:flutter/material.dart'; 
import 'package:get/get.dart';
import 'package:getx_login_demo/controllers/user_controller.dart'; 

class HomePage extends StatelessWidget { 
  
  final UserController _userController = Get.find(); 
  
  @override 
  Widget build(BuildContext context) { 
    return Scaffold( 
      appBar: AppBar( 
        title: Text("首页"), 
        actions: [ 
          IconButton( 
            icon: Icon(Icons.logout), 
            onPressed: () async { 
              await _userController.logout(); 
              Get.offAllNamed("/login"); 
            }, 
          ), 
        ], 
      ), 
      body: 
      Center( 
        child: Text("欢迎回来!"), 
      ), 
    ); 
  } 

} 
  1. 最后,在 lib/main.dart 中添加以下内容:
import 'package:flutter/material.dart'; 
import 'package:get/get.dart';
import 'package:getx_login_demo/pages/home_page.dart'; 
import 'package:getx_login_demo/pages/login_page.dart'; 

void main() { 
  runApp(MyApp()); 
} 

class MyApp extends StatelessWidget { 

  @override 
  Widget build(BuildContext context) { 

    return GetMaterialApp( 
      title: 'Flutter Demo', 
      theme: ThemeData( 
        primarySwatch: Colors.blue, 
      ), 
      initialRoute: "/", 
      getPages: [ 
        GetPage(name: "/", page: () => HomePage()), 
        GetPage(name: "/login", page: () => LoginPage()), 
      ], 
    ); 
  } 
} 

现在,我们可以运行应用程序,并尝试登录。当我们成功登录后,我们将被重定向到主页。当我们点击主页上的“退出”按钮时,我们将被重定向到登录页面。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容