Apollo Link Token Refresh 使用教程

Apollo Link Token Refresh 使用教程

apollo-link-token-refreshApollo Link that performs access tokens (JWT) renew项目地址:https://gitcode.com/gh_mirrors/ap/apollo-link-token-refresh

项目介绍

apollo-link-token-refresh 是一个用于 Apollo Client 的链接，专门用于刷新过期的 JWT（访问令牌）。这个链接是非终止链接，这意味着它不应该作为链接链中的最后一个链接。项目的主要功能是在访问令牌过期时，使用刷新令牌获取新的访问令牌，从而保持用户的登录状态。

项目快速启动

安装依赖

首先，你需要安装 apollo-link-token-refresh 及其相关依赖：

npm install apollo-link-token-refresh apollo-client apollo-link-http graphql

配置 Apollo Client

以下是一个简单的配置示例，展示了如何使用 apollo-link-token-refresh：

import { ApolloClient, InMemoryCache, createHttpLink } from 'apollo-boost';
import { setContext } from 'apollo-link-context';
import { TokenRefreshLink } from 'apollo-link-token-refresh';
import jwtDecode from 'jwt-decode';

const cache = new InMemoryCache();

const refreshLink = new TokenRefreshLink({
  accessTokenField: 'newToken',
  isTokenValidOrUndefined: () => {
    const token = getToken(); // 获取当前的访问令牌
    if (!token) return true;
    try {
      const { exp } = jwtDecode(token);
      if (Date.now() >= exp * 1000) {
        return false;
      } else {
        return true;
      }
    } catch {
      return false;
    }
  },
  fetchAccessToken: async () => {
    const response = await fetch('http://localhost:8009/graphql', {
      method: 'POST',
      headers: {
        'content-type': 'application/json',
        'Authorization': `Bearer ${getToken()}`,
        'refresh_token': getRefreshToken()
      },
      body: JSON.stringify({
        query: `mutation { refreshUserToken(userId: "${getUserId()}") { user_id token msg status } }`
      })
    });
    return await response.json();
  },
  handleFetch: (newToken) => {
    console.log("New Token:", newToken);
    setToken(newToken); // 更新访问令牌
  },
  handleError: (error) => {
    console.error('Cannot refresh access token:', error);
  }
});

const httpLink = createHttpLink({
  uri: 'http://localhost:8009/graphql'
});

const authLink = setContext((_, { headers }) => {
  const token = getToken();
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  };
});

const client = new ApolloClient({
  link: authLink.concat(refreshLink).concat(httpLink),
  cache
});

export default client;

应用案例和最佳实践

应用案例

假设你有一个 React 应用，用户登录后会获得一个访问令牌和一个刷新令牌。当访问令牌过期时，apollo-link-token-refresh 会自动使用刷新令牌获取新的访问令牌，从而保持用户的登录状态。

最佳实践

1. 安全存储令牌：确保访问令牌和刷新令牌的安全存储，避免泄露。
2. 定期更新令牌：即使访问令牌没有过期，也可以定期使用刷新令牌更新访问令牌，以减少令牌被劫持的风险。
3. 错误处理：在 handleError 中添加适当的错误处理逻辑，以便在刷新令牌失败时通知用户。

典型生态项目

Apollo Client

apollo-link-token-refresh 是 Apollo Client 生态系统的一部分，用于处理客户端的令牌刷新逻辑。Apollo Client 是一个功能强大的 GraphQL 客户端，广泛用于 React 和其他前端框架中。

JWT

JSON Web Token (JWT) 是一种开放标准 (RFC 7519)，用于在各方之间安全地传输信息。JWT 通常用于身份验证和信息交换。apollo-link-token-refresh 专门处理 JWT 的刷新逻辑

apollo-link-token-refreshApollo Link that performs access tokens (JWT) renew项目地址:https://gitcode.com/gh_mirrors/ap/apollo-link-token-refresh