Question

我们在我们的应用程序中使用Apollo / Graphql，我们正面临一个问题。

应用程序在Angular 5中开发，NodeJS作为后端与graphql服务器一起开发，它将响应前端。为了拦截角度中的Http请求，我们实现了'HttpInterceptor'，因此我们可以以自定义方式处理错误。但是，阿波罗的请求不会通过这个截距。

为了正确处理错误，我们使用'apollo-link-error'。

但我们想知道是否有可能以与HttpInterceptor类似的方式拦截apollo请求。

Answer 1

您好我有同样的问题，

红色：

Apollo Links可以创建允许您修改请求的中间件在将它们发送到服务器之前

Apollo Middleware

Apollo 2.0 Auth

这是一个例子：

import { HttpHeaders } from '@angular/common/http';
import { Apollo } from 'apollo-angular';
import { HttpLink } from 'apollo-angular-link-http';
import { setContext } from 'apollo-link-context';
import { InMemoryCache } from 'apollo-cache-inmemory';

@NgModule({ ... })
class AppModule {
  constructor(
    apollo: Apollo,
    httpLink, HttpLink
  ) {
    const http = httpLink.create({uri: '/graphql'});

    const auth = setContext((_, { headers }) => {
      // get the authentication token from local storage if it exists
      const token = localStorage.getItem('token');
      // return the headers to the context so httpLink can read them
      // in this example we assume headers property exists
      // and it is an instance of HttpHeaders
      if (!token) {
        return {};
      } else {
        return {
          headers: headers.append('Authorization', `Bearer ${token}`)
        };
      }
    });

    apollo.create({
      link: auth.concat(http),
      // other options like cache
    });
  }
}

Answer 2

我认为拦截Apollo客户请求的官方方法是通过Apollo链接。

但是，如果您使用的是Angular，也可以通过HttpInterceptor来实现。使用Apollo Client时，您可以看一下我在how to manage access/refresh tokens using Angular's HttpInterceptor上发表的这篇文章。

希望这会有所帮助。

拦截Apollo / graphql请求

2 个答案: