获取 header.append 不是使用 Apollo 角度示例设置身份验证的功能

Posted 2023-03-10

【中文标题】获取 header.append 不是使用 Apollo 角度示例设置身份验证的功能

【英文标题】：Getting header.append is not a function in setting auth using Apollo angular example

【发布时间】：2018-05-16 10:28:44

【问题描述】：

我正在根据此处显示的 apollo angular 配方实现一个模块：

https://www.apollographql.com/docs/angular/recipes/authentication.html

但是在我的情况下，我收到了一个错误，因为headers 参数没有附加功能（看起来它有一些选项，如 forceFetch 和缓存）。当标题为空时，我是否应该为标题初始化一个空的 - 这是否意味着它们显示的示例不正确？ ...还是我做错了什么？

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( ... )
export class GraphQLModule 
  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
    );
  

【问题讨论】：

你正在使用 HttpHeaders，那么我想你想说 headers: new HttpHeaders().set('Authorization', Bearer $token)。在 Angular5 中，情况发生了变化。见angular.io/guide/http

【参考方案1】：

聚会迟到，但可能会帮助某人：

import  HttpHeaders  from '@angular/common/http';
import  setContext  from 'apollo-link-context';
import  NgModule  from '@angular/core';
import  ApolloModule, APOLLO_OPTIONS  from 'apollo-angular';
import  HttpLinkModule, HttpLink  from 'apollo-angular-link-http';
import  InMemoryCache  from 'apollo-cache-inmemory';

const uri = 'http://yourURI/graphql'; 

export function createApollo(httpLink: HttpLink) 

  const auth = setContext((_,  headers = new HttpHeaders() ) => 
    // get the authentication token from local storage if it exists
    const token = localStorage.getItem('token');
    if (!token) 
      return ;
     else 
      return 
        headers: headers.append('Authorization', `$token`)
      ;
    
  );

  const http = httpLink.create( uri );

  return 
    link: auth.concat(http),
    cache: new InMemoryCache(),
  ;


@NgModule(
  exports: [ApolloModule, HttpLinkModule],
  providers: [
    
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink],
    ,
  ],
)
export class GraphQLModule  

请记住，以上内容应该在为您创建的graphql.module.ts 中。如果是您自己创建的，那么您就知道接下来要进行哪些调整。

【参考方案2】：

看，这是我的 graph.module.ts 我遇到了同样的问题，但用这段代码修复了：

import  NgModule  from '@angular/core';
import  HttpClientModule  from '@angular/common/http';
// Apollo
import  ApolloModule, Apollo  from 'apollo-angular';
import  HttpLinkModule, HttpLink  from 'apollo-angular-link-http';
import  InMemoryCache  from 'apollo-cache-inmemory';
import  AppConfig  from '../app/app.config';
import  setContext  from 'apollo-link-context';
import  ApolloLink, concat  from 'apollo-link';
import  HttpHeaders  from '@angular/common/http';
import  Http, Response, Headers, RequestOptions from '@angular/http';

// GraphiQL: https://launchpad.graphql.com/1jzxrj179


@NgModule(
  exports: [
    HttpClientModule,
    ApolloModule,
    HttpLinkModule
  ]
)
export class GraphQLModule 
  constructor(
    apollo: Apollo,
    httpLink: HttpLink
  ) 
  const http = httpLink.create(uri: AppConfig.apiEndPointGraph);
    // create Apollo

    let token = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjM3LCJpc3MiOiJodHRwOi8vemV1cy1zdGFnaW5nLWVudi51cy13ZXN0LTIuZWxhc3RpY2JlYW5zdGFsay5jb20vYXBpL2FwcC1sb2dpbiIsImlhdCI6MTUyNjQyMjQ4NCwiZXhwIjoxNTI3NjMyMDg0LCJuYmYiOjE1MjY0MjI0ODQsImp0aSI6IkhOMmRPQ2xJeklDVlhpODAifQ.9U4Gxqxeuir5mUvgVgE4FxYgwrGIHvnjCqxWRuHXfUM";

        const authMiddleware = new ApolloLink((operation, forward) => 
          // add the authorization to the headers
          operation.setContext(
            headers: new HttpHeaders().set('Authorization', `Bearer $token`)
          );

          return forward(operation);
        );
    apollo.create(
      link:concat(authMiddleware, http),
      cache: new InMemoryCache()
    );
  

【参考方案3】：

我之前也遇到过同样的问题。我通过直接将授权标头放入标头对象中成功地传递了它。

return 
    headers: 
        Authorization: `Bearer $token`
    
;