Flutter JWT认证插件jwt_auth的使用

Flutter JWT认证插件jwt_auth的使用

该插件为Flutter应用程序提供了一个易于使用的JWT（JSON Web Token）认证解决方案。它简化了令牌存储、检索和续订，从而实现安全且无缝的用户会话管理。

特性

• 登录与登出：轻松认证用户并清除会话。
• 令牌存储：使用flutter_secure_storage安全地存储和访问令牌。
• 令牌续订：自动管理令牌过期并刷新令牌。
• 状态管理：使用Bloc进行有用的状态管理。

安装

在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter_jwt_auth: ^1.0.0
  flutter_secure_storage: ^5.0.2
  dio: ^5.7.0
  flutter_bloc: ^8.1.6

运行flutter pub get以获取这些依赖项。

使用

该插件使用了一些库，其中最重要的是Bloc用于状态管理和Dio用于HTTP客户端请求管理。Dio的拦截器功能非常有用。当令牌过期时，该插件会自动刷新令牌。

初始化插件

在使用插件之前，需要对其进行初始化。这通常应在应用程序启动时完成，例如在主方法中。

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:jwt_auth/bloc/jwt_authentication_bloc.dart';
import 'package:jwt_auth/bloc/jwt_authentication_event.dart';
import 'dart:async';

import 'package:jwt_auth/jwt_authentication_repository.dart';
import 'package:jwt_auth/models/jwt_auth_config.dart';
import 'package:jwt_auth/models/jwt_auth_log_level.dart';
import 'package:jwt_auth_example/app.dart';

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

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

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

class _MyAppState extends State<MyApp> {
  late final Dio dio; // 创建一个Dio实例
  late final JwtAuthenticationRepository _authenticationRepository;

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  Future<void> initPlatformState() async {
    super.initState();

    _authenticationRepository = JwtAuthenticationRepository(
      config: JwtAuthConfig(
        tokenUrl: 'http://10.0.2.2:5244/api/v1/auth/token', // 你的登录端点
        refreshUrl: 'http://10.0.2.2:5244/api/v1/auth/refreshToken', // 你的刷新令牌端点
        logLevel: JwtAuthLogLevel.none,
      ),
    );

    dio.interceptors.add(JwtAuthenticationInterceptor(_authenticationRepository)); // 用于自动刷新令牌
  }

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return RepositoryProvider.value(
      value: _authenticationRepository,
      child: BlocProvider(
        lazy: false,
        create: (_) => JwtAuthenticationBloc(
          authenticationRepository: _authenticationRepository,
        )..add(JwtAuthenticationInitializationRequested()),
        child: const AppView(),
      ),
    );
  }
}

示例代码

以下是一个完整的示例代码，展示了如何使用jwt_auth插件进行JWT认证。

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:jwt_auth/bloc/jwt_authentication_bloc.dart';
import 'package:jwt_auth/bloc/jwt_authentication_event.dart';
import 'dart:async';

import 'package:jwt_auth/jwt_authentication_repository.dart';
import 'package:jwt_auth/models/jwt_auth_config.dart';
import 'package:jwt_auth/models/jwt_auth_log_level.dart';
import 'package:jwt_auth_example/app.dart';

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

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

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

class _MyAppState extends State<MyApp> {
  late final JwtAuthenticationRepository _authenticationRepository;

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 平台消息是异步的，因此我们在异步方法中进行初始化。
  Future<void> initPlatformState() async {
    super.initState();

    _authenticationRepository = JwtAuthenticationRepository(
      config: JwtAuthConfig(
        tokenUrl: 'http://10.0.2.2:5244/api/v1/auth/token',
        refreshUrl: 'http://10.0.2.2:5244/api/v1/auth/refreshToken',
        logLevel: JwtAuthLogLevel.none,
      ),
    );
  }

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return RepositoryProvider.value(
      value: _authenticationRepository,
      child: BlocProvider(
        lazy: false,
        create: (_) => JwtAuthenticationBloc(
          authenticationRepository: _authenticationRepository,
        )..add(JwtAuthenticationInitializationRequested()),
        child: const AppView(),
      ),
    );
  }
}