Redux Toolkit 中实现自动令牌刷新的最佳实践

概述

在现代Web应用中，身份验证和授权是至关重要的安全机制。当使用JWT(JSON Web Tokens)进行身份验证时，通常会遇到访问令牌过期的问题。本文将详细介绍如何在Redux Toolkit中优雅地处理401未授权错误，实现自动令牌刷新机制。

核心问题

当API请求返回401状态码时，通常意味着当前使用的访问令牌已过期或无效。传统解决方案是强制用户重新登录，但这会带来糟糕的用户体验。更优雅的方式是使用刷新令牌自动获取新的访问令牌，然后重试失败的请求。

解决方案架构

Redux Toolkit提供了fetchBaseQuery和自定义查询功能，我们可以利用这些特性构建一个自动令牌刷新机制。以下是实现这一功能的关键步骤：

1. 基础查询配置

首先创建一个基础查询实例，用于处理常规请求：

const baseQuery = fetchBaseQuery({
    baseUrl: `${config.basePath}`,
    prepareHeaders: (headers) => {
        const token = CredentialsHelper.accessToken();
        if (token) {
            headers.set('authorization', `Bearer ${token}`);
        }
        return headers;
    },
});

这个配置会自动将访问令牌添加到请求头中。

2. 增强查询功能

接下来创建一个增强版的基础查询，它会拦截401错误并尝试刷新令牌：

const baseQueryWithReauth = async (args, api, extraOptions) => {
    let result = await baseQuery(args, api, extraOptions);
    
    if (result?.error?.status === 401) {
        try {
            const refreshToken = CredentialsHelper.refreshToken();
            const {data} = await api.dispatch(
                authApi.endpoints.refreshToken.initiate(refreshToken),
            );
            
            CredentialsHelper.update(data.access_token, data.refresh_token);
            result = await baseQuery(args, api, extraOptions);
        } catch (error) {
            console.log('令牌刷新失败', error);
        }
    }
    
    return result;
};

3. API切片配置

最后，在创建API切片时使用这个增强版的查询：

export const apiSlice = createApi({
    reducerPath: 'api',
    baseQuery: baseQueryWithReauth,
    tagTypes: [],
    endpoints: () => ({}),
});

实现细节解析

1. 错误拦截：增强查询会检查每个请求的响应，如果发现401错误，就会触发令牌刷新流程。

2. 令牌刷新：使用保存在本地的刷新令牌发起新的请求，获取新的访问令牌和刷新令牌。

3. 令牌更新：将新获取的令牌保存到本地存储中，确保后续请求可以使用最新的令牌。

4. 请求重试：使用新的访问令牌重新发起原始请求，对用户来说整个过程是无感知的。

5. 错误处理：如果令牌刷新失败，可以执行清理操作，如清除本地存储的令牌并重定向到登录页面。

最佳实践建议

1. 令牌存储安全：确保使用安全的方式存储令牌，考虑使用HttpOnly cookies或安全的本地存储方案。

2. 并发请求处理：当多个请求同时返回401时，应该实现令牌刷新请求的防抖机制，避免重复刷新。

3. 令牌过期检查：可以在发起请求前检查令牌是否即将过期，提前刷新令牌。

4. 错误回退：当令牌刷新失败时，应该提供清晰的用户反馈并引导重新登录。

总结

通过Redux Toolkit的自定义查询功能，我们可以构建一个健壮的自动令牌刷新机制。这种方法不仅提升了用户体验，还保持了应用的安全性。实现的关键在于正确拦截401错误、安全地处理令牌刷新流程，并确保所有失败的请求都能得到适当的重试。