使用Apollo捕获GraphQL中session: null特定响应并触发登出操作

这问题我太有共鸣了——要是每个GraphQL查询和mutation都单独写一遍session: null的检查，那代码量得爆炸！其实咱们只需要搞一套统一的响应拦截逻辑，就能一次性搞定所有请求的处理，不用挨个修改请求代码。

核心思路 #

不管你用的是哪种GraphQL客户端，核心都是在响应返回客户端的统一入口处，批量检查所有请求的返回数据，一旦发现session: null就触发登出逻辑。下面我以最常用的Apollo Client为例，给你详细讲实现步骤，其他客户端的思路也类似。

针对Apollo Client的实现 #

1. 自定义响应拦截Link #

Apollo Client的Link机制允许我们在请求/响应的生命周期中插入自定义逻辑。我们可以写一个专门的Link，用来检查每个响应里的session字段：

import { ApolloLink } from '@apollo/client';

// 定义你的登出销毁令牌方法
const logoutAndDestroyToken = () => {
  // 这里写具体逻辑：比如清除localStorage里的令牌，跳转到登录页等
  localStorage.removeItem('authToken');
  window.location.href = '/login';
};

// 创建自定义的session检查Link
const sessionCheckLink = new ApolloLink((operation, forward) => {
  // 转发请求，然后处理返回的响应
  return forward(operation).map(response => {
    // 遍历响应data里的所有顶级字段（比如query的name1、mutation的name2）
    const hasInvalidSession = Object.values(response.data || {}).some(result => {
      // 检查当前请求的返回结果中是否包含session: null
      return result?.session === null;
    });

    if (hasInvalidSession) {
      // 触发登出逻辑
      logoutAndDestroyToken();
    }

    return response;
  });
});

2. 将Link集成到Apollo Client实例中 #

在创建Apollo Client的时候，把这个自定义Link和HTTP Link组合起来，确保所有响应都会经过这个检查环节：

import { ApolloClient, InMemoryCache, from } from '@apollo/client';
import { HttpLink } from '@apollo/client/link/http';

// 创建HTTP Link指向你的GraphQL服务器
const httpLink = new HttpLink({ uri: '/your-graphql-endpoint' });

// 组合所有Link，sessionCheckLink要放在httpLink前面
const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: from([sessionCheckLink, httpLink]),
});

其他GraphQL客户端的适配思路 #

如果用的是urql、Relay这类其他客户端，逻辑也是大同小异：

• urql：可以通过自定义Exchange来拦截响应，用RxJS的tap操作符检查数据
• Relay：可以在Network Layer的响应处理函数中统一检查

比如urql的简单实现示例：

import { createClient, dedupExchange, cacheExchange, fetchExchange } from 'urql';
import { tap } from 'rxjs/operators';

const sessionCheckExchange = ({ forward }) => ops$ => {
  return forward(ops$).pipe(
    tap(result => {
      const hasInvalidSession = Object.values(result.data || {}).some(item => 
        item?.session === null
      );
      if (hasInvalidSession) {
        logoutAndDestroyToken();
      }
    })
  );
};

const client = createClient({
  url: '/your-graphql-endpoint',
  exchanges: [dedupExchange, cacheExchange, sessionCheckExchange, fetchExchange],
});

额外注意事项 #

• 如果你的session字段有时候会嵌套在更深的层级里，可以写一个递归函数来遍历所有响应数据字段，确保不会漏掉
• 建议在登出逻辑里加个防抖，避免短时间内多个请求同时返回session: null导致重复执行登出操作

内容的提问来源于stack exchange，提问作者magnat