Skip to content

Commit

Permalink
fix: example of queued_interceptor_csrftoken.dart (#2345)
Browse files Browse the repository at this point in the history
  • Loading branch information
@seunghwanly
seunghwanly authored Jan 11, 2025
1 parent 6888bd0 commit e7edb97
Show file tree
Hide file tree
Showing 3 changed files with 166 additions and 158 deletions.
2 changes: 1 addition & 1 deletion dio/README-ZH.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -520,7 +520,7 @@ print(response.data); // 'fake data'
`csrfToken` 都为 null，所以它们都需要去请求 `csrfToken`，这会导致 `csrfToken` 被请求多次。
为了避免不必要的重复请求，可以使用 `QueuedInterceptor`， 这样只需要第一个请求处理一次即可。

完整的示例代码请点击 [这里](../example/lib/queued_interceptor_crsftoken.dart).
完整的示例代码请点击 [这里](../example_dart/lib/queued_interceptor_crsftoken.dart).

#### 日志拦截器

Expand Down
2 changes: 1 addition & 1 deletion dio/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -528,7 +528,7 @@ we need to request a csrfToken first, and then perform the network request,
because the request csrfToken progress is asynchronous,
so we need to execute this async request in request interceptor.

For the complete code see [here](../example/lib/queued_interceptor_crsftoken.dart).
For the complete code see [here](../example_dart/lib/queued_interceptor_crsftoken.dart).

#### LogInterceptor

Expand Down
320 changes: 164 additions & 156 deletions example_dart/lib/queued_interceptor_crsftoken.dart
View file
Original file line number Diff line number Diff line change
@@ -1,164 +1,172 @@
// ignore: dangling_library_doc_comments
/// CSRF Token Example
///
/// Add interceptors to handle CSRF token.
/// - token update
/// - retry policy
///
/// Scenario:
/// 1. Client access to the Server by using `GET` method.
/// 2. Server generates CSRF token and sends it to the client.
/// 3. Client make a request to the Server by using `POST` method with the CSRF token.
/// 4. If the CSRF token is invalid, the Server returns 401 status code.
/// 5. Client requests a new CSRF token and retries the request.
import 'dart:developer';
import 'dart:convert';
import 'dart:math';

import 'package:dio/dio.dart';

void main() async {
/// HTML example:
/// ``` html
/// <input type="hidden" name="XSRF_TOKEN" value=${cachedCSRFToken} />
/// ```
const String cookieKey = 'XSRF_TOKEN';

/// Header key for CSRF token
const String headerKey = 'X-Csrf-Token';

String? cachedCSRFToken;

void printLog(
int index,
String path,
) =>
log(
'''
#$index
- Path: '$path'
- CSRF Token: $cachedCSRFToken
''',
name: 'queued_interceptor_csrftoken.dart',
);

final dio = Dio()
..options.baseUrl = 'https://httpbun.com/'
..interceptors.addAll(
[
/// Handles CSRF token
QueuedInterceptorsWrapper(
/// Adds CSRF token to headers, if it exists
onRequest: (requestOptions, handler) {
if (cachedCSRFToken != null) {
requestOptions.headers[headerKey] = cachedCSRFToken;
requestOptions.headers['Set-Cookie'] =
'$cookieKey=$cachedCSRFToken';
}
return handler.next(requestOptions);
},

/// Update CSRF token from [response] headers, if it exists
onResponse: (response, handler) {
final token = response.headers.value(headerKey);

if (token != null) {
cachedCSRFToken = token;
}
return handler.resolve(response);
},

onError: (error, handler) async {
if (error.response == null) {
return handler.next(error);
}

/// When request fails with 401 status code, request new CSRF token
if (error.response?.statusCode == 401) {
try {
final tokenDio = Dio(
BaseOptions(baseUrl: error.requestOptions.baseUrl),
);

/// Generate CSRF token
///
/// This is a MOCK REQUEST to generate a CSRF token.
/// In a real-world scenario, this should be generated by the server.
final result = await tokenDio.post(
'/response-headers',
queryParameters: {
headerKey: '94d6d1ca-fa06-468f-a25c-2f769d04c26c',
},
);

if (result.statusCode == null ||
result.statusCode! ~/ 100 != 2) {
throw DioException(requestOptions: result.requestOptions);
}

final updatedToken = result.headers.value(headerKey);
if (updatedToken == null) {
throw ArgumentError.notNull(headerKey);
}

cachedCSRFToken = updatedToken;

return handler.next(error);
} on DioException catch (e) {
return handler.reject(e);
}
}
},
),

/// Retry the request when 401 occurred
QueuedInterceptorsWrapper(
onError: (error, handler) async {
if (error.response != null && error.response!.statusCode == 401) {
final retryDio = Dio(
BaseOptions(baseUrl: error.requestOptions.baseUrl),
);

if (error.requestOptions.headers.containsKey(headerKey) &&
error.requestOptions.headers[headerKey] != cachedCSRFToken) {
error.requestOptions.headers[headerKey] = cachedCSRFToken;
}

/// In real-world scenario,
/// the request should be requested with [error.requestOptions]
/// using [fetch] method.
/// ``` dart
/// final result = await retryDio.fetch(error.requestOptions);
/// ```
final result = await retryDio.get('/mix/s=200');

return handler.resolve(result);
}
},
),
],
);

/// Make Requests
printLog(0, 'initial');

/// #1 Access to the Server
final accessResult = await dio.get(
'/response-headers',
final tokenManager = TokenManager();

/// Pretend the Server has generated CSRF token
/// and passed it to the client.
queryParameters: {
headerKey: 'fbf07f2b-b957-4555-88a2-3d3e30e5fa64',
},
final dio = Dio(
BaseOptions(
baseUrl: 'https://httpbun.com',
),
);
printLog(1, accessResult.realUri.path);

/// #2 Make a request(POST) to the Server
///
/// Pretend the token has expired.
///
/// Then the interceptor will request a new CSRF token
final createResult = await dio.post(
'/mix/s=401/',

dio.interceptors.add(
QueuedInterceptorsWrapper(
onRequest: (requestOptions, handler) {
print(
'''
[onRequest] ${requestOptions.hashCode} / time: ${DateTime.now().toIso8601String()}
\tPath: ${requestOptions.path}
\tHeaders: ${requestOptions.headers}
''',
);

// In case, you have 'refresh_token' and needs to refresh your 'access_token',
// request a new 'access_token' and update from here.

if (tokenManager.accessToken != null) {
requestOptions.headers['Authorization'] =
'Bearer ${tokenManager.accessToken}';
}

return handler.next(requestOptions);
},
onResponse: (response, handler) {
print('''
[onResponse] ${response.requestOptions.hashCode} / time: ${DateTime.now().toIso8601String()}
\tStatus: ${response.statusCode}
\tData: ${response.data}
''');

return handler.resolve(response);
},
onError: (error, handler) async {
final statusCode = error.response?.statusCode;
print(
'''
[onError] ${error.requestOptions.hashCode} / time: ${DateTime.now().toIso8601String()}
\tStatus: $statusCode
''',
);

// This example only handles the '401' status code,
// The more complex scenario should handle more status codes e.g. '403', '404', etc.
if (statusCode != 401) {
return handler.resolve(error.response!);
}

// To prevent repeated requests to the 'Authentication Server'
// to update our 'access_token' with parallel requests,
// we need to compare with the previously requested 'access_token'.
final requestedAccessToken =
error.requestOptions.headers['Authorization'];
if (requestedAccessToken == tokenManager.accessToken) {
final tokenRefreshDio = Dio()
..options.baseUrl = 'https://httpbun.com';

final response = await tokenRefreshDio.post(
'/mix/s=201/b64=${base64.encode(
jsonEncode(AuthenticationServer.generate()).codeUnits,
)}',
);
tokenRefreshDio.close();

// Treat codes other than 2XX as rejected.
if (response.statusCode == null || response.statusCode! ~/ 100 != 2) {
return handler.reject(error);
}

final body = jsonDecode(response.data) as Map<String, Object?>;
if (!body.containsKey('access_token')) {
return handler.reject(error);
}

final token = body['access_token'] as String;
tokenManager.setAccessToken(token, error.requestOptions.hashCode);
}

/// The authorization has been resolved so and try again with the request.
final retried = await dio.fetch(
error.requestOptions
..path = '/mix/s=200'
..headers = {
'Authorization': 'Bearer ${tokenManager.accessToken}',
},
);

// Treat codes other than 2XX as rejected.
if (retried.statusCode == null || retried.statusCode! ~/ 100 != 2) {
return handler.reject(error);
}

return handler.resolve(error.response!);
},
),
);
printLog(2, createResult.realUri.path);

await Future.wait([
dio.post('/mix/s=401'),
dio.post('/mix/s=401'),
dio.post('/mix/s=200'),
]);

tokenManager.printHistory();

dio.close();
}

typedef TokenHistory = ({
String? previous,
String? current,
DateTime updatedAt,
int updatedBy,
});

/// Pretend as 'Authentication Server' that generates access token and refresh token
class AuthenticationServer {
static Map<String, String> generate() => <String, String>{
'access_token': _generateUuid(),
'refresh_token': _generateUuid(),
};

static String _generateUuid() {
final random = Random.secure();
final bytes = List<int>.generate(8, (_) => random.nextInt(256));
return bytes.map((b) => b.toRadixString(16).padLeft(2, '0')).join();
}
}

class TokenManager {
static String? _accessToken;

static final List<TokenHistory> _history = <TokenHistory>[];

String? get accessToken => _accessToken;

void printHistory() {
print('=== Token History ===');
for (int i = 0; i < _history.length; i++) {
final entry = _history[i];
print('''
[$i]\tupdated token: ${entry.previous} → ${entry.current}
\tupdated at: ${entry.updatedAt.toIso8601String()}
\tupdated by: ${entry.updatedBy}
''');
}
}

void setAccessToken(String? token, int instanceId) {
final previous = _accessToken;
_accessToken = token;
_history.add(
(
previous: previous,
current: _accessToken,
updatedAt: DateTime.now(),
updatedBy: instanceId,
),
);
}
}

0 comments on commit e7edb97

Please sign in to comment.