当前位置：首页 > news >正文

react-query用户哭了：token认证还能这么玩？

news 2025/5/11 3:33:56

嘿，各位前端小伙伴们！今天我想和大家聊聊一个实用的工具——alovajs的token认证管理器。老实说，这个工具确实给我的开发工作带来了不少便利。还记得以前处理token认证时的各种繁琐操作吗？现在，有了这个管理器，一切都变得简单多了。

alovajs是什么？

alovajs是一个新一代的请求工具，它不仅仅是一个简单的HTTP客户端。与react-query和swrjs等库不同，alovajs提供了一个完整的请求解决方案。它能够一键生成接口调用代码、TypeScript类型和接口文档，大大缩短了前后端协作的距离。而且，它还提供了各种高质量的请求策略，可以满足几乎所有特定请求场景的需求。

想了解更多关于alovajs的信息吗？可以去官网 https://alova.js.org 看看，那里有更详细的介绍和文档。

token认证管理器的使用

说真的，这个token认证管理器的使用方法比我想象的要简单得多。让我们一起来看看怎么用吧。

绑定认证拦截器

首先，我们需要绑定认证拦截器。alovajs提供了客户端和服务端两种认证方式。这里以客户端认证为例：

import { createClientTokenAuthentication } from 'alova/client';
import { createAlova } from 'alova';const { onAuthRequired, onResponseRefreshToken } = createClientTokenAuthentication({// 配置项
});const alovaInstance = createAlova({beforeRequest: onAuthRequired(),responded: onResponseRefreshToken()
});

这段代码看起来很简单，对吧？但它实际上为我们处理了很多复杂的逻辑。

无感刷新Token

这个功能真的很贴心。当token过期时，它会自动帮我们刷新，而不会打断用户的操作：

createClientTokenAuthentication({refreshToken: {isExpired: method => tokenExpireTime < Date.now(),handler: async method => {try {const { token, refresh_token } = await refreshToken();localStorage.setItem('token', token);localStorage.setItem('refresh_token', refresh_token);} catch (error) {location.href = '/login';throw error;}}}
});

想象一下，用户正在浏览你的网站，突然token过期了。以前可能会直接跳转到登录页面，但现在，用户甚至不会注意到token已经被刷新了。这就是无感刷新的魅力所在。

放行访客请求

有些接口不需要token认证，我们可以这样设置：

export const requestTokenNotRequired = () => {const method = alovaInstance.Get('/token_not_required');method.meta = {authRole: null};return method;
};

这个功能特别适合那些公开的API，比如获取网站的基本信息或者公开的文章列表等。

登录拦截和token附加

我们还可以统一管理登录和token附加的逻辑：

createClientTokenAuthentication({login(response, method) {localStorage.setItem('token', response.token);localStorage.setItem('refresh_token', response.refresh_token);},assignToken: method => {method.config.headers.Authorization = localStorage.getItem('token');}
});