Flutter认证状态管理插件auth_state_manager的使用

Flutter认证状态管理插件auth_state_manager的使用

Auth State Manager

Auth State Manager 帮助您监控应用程序中的认证变化。如果您在应用中使用HTTP请求并且需要访问API的令牌，这个包非常适合。该包会将访问令牌保存到共享偏好设置，并在需要时返回它。

安装

1. 在 pubspec.yaml 文件中添加最新版本的包（并运行 dart pub get）：

dependencies:
  auth_state_manager: ^0.1.1

1. 在 main.dart 中导入包：

import 'package:auth_state_manager/auth_state_manager.dart';

1. 初始化 AuthStateManager。
   • 确保在 main() 函数中添加 async。
   • 确保通过 WidgetsFlutterBinding.ensureInitialized(); 初始化 FlutterBinding。
   • 确保使用 await 初始化 AuthStateManager。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await AuthStateManager.initializeAuthState();
  runApp(
    const MaterialApp(
      home: MyApp(),
    ),
  );
}

使用

1. 将您的根部件用 AuthStateListener 包裹，并提供 authenticated 和 unAuthenticated 状态下的部件。这将帮助您控制应用的认证流程。如果没有授权，AuthStateListener 返回 unAuthenticated 部件；如果已登录，则返回 authenticated 部件。

[@override](/user/override)
Widget build(BuildContext context) {
  return const AuthStateListener(
    authenticated: MainScreen(),
    unAuthenticated: LoginScreen(),
  );
}

1. 通过以下方式将您的访问令牌保存到 AuthState：

await AuthStateManager.instance.setToken('MyToken');

注意：setToken() 是异步方法，所以要确保 await 它。请注意，保存您的令牌不会触发认证状态的变化。要更改认证状态，应该使用 login() 方法。

final bool isSuccessful =
    await AuthStateManager.instance.setToken('MyToken');
if (isSuccessful) {
    AuthStateManager.instance.login();
}

1. 通过以下方式删除访问令牌并注销：

AuthStateManager.instance.logOut();

logOut() 方法将删除访问令牌并触发认证状态变化。

1. 通过以下方式监听认证状态的变化：

late final StreamSubscription _authStateSub;

@Override
void initState() {
  super.initState();
  _authStateSub = AuthStateManager.instance.authStateAsStream.listen((state) {
    if (!mounted) return;
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('isAuthenticated: $state'),
      ),
    );
  });
}

@Override
void dispose() {
  super.dispose();
  _authStateSub.cancel();
}

AuthStateManager.instance.authStateAsStream 返回一个 Stream<bool>，您可以对其进行监听。

示例

以下是完整的示例代码：

import 'dart:async';
import 'package:auth_state_manager/auth_state_manager.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await AuthStateManager.initializeAuthState();
  runApp(
    const MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late final StreamSubscription _authStateSub;

  [@override](/user/override)
  void initState() {
    super.initState();
    _authStateSub = AuthStateManager.instance.authStateAsStream.listen((state) {
      if (!mounted) return;
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('isAuthenticated: $state'),
        ),
      );
    });
  }

  [@override](/user/override)
  void dispose() {
    super.dispose();
    _authStateSub.cancel();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const AuthStateListener(
      authenticated: MainScreen(),
      unAuthenticated: LoginScreen(),
    );
  }
}

class MainScreen extends StatelessWidget {
  const MainScreen({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Auth State Manager'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Authenticated',
              style: TextStyle(
                fontSize: 24,
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                AuthStateManager.instance.logOut();
              },
              child: const Text(
                'Sign Out',
                style: TextStyle(
                  fontSize: 16,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class LoginScreen extends StatelessWidget {
  const LoginScreen({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Auth State Manager'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'UnAuthenticated',
              style: TextStyle(
                fontSize: 24,
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                final bool isSuccessful =
                    await AuthStateManager.instance.setToken('MyToken');
                if (isSuccessful) {
                  AuthStateManager.instance.login();
                }
              },
              child: const Text(
                'Log in',
                style: TextStyle(
                  fontSize: 16,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}