title: Vue apollo - send authorization over websockets
body: <p>I have a vue web app from which I'm trying to run a subscription using a hasura query.</p>
  <p>My problem is that I cannot pass to the Websocket request an authorization token as the backend expects.
  These are my current settings:</p>
  <pre><code>const token = localStorage.getItem(&quot;token&quot;) || null;
  
  const options = {
    httpUri: //graphql http entpoint,
    wsUri: //graphql ws endpoint
  };
  let link = new HttpLink({
    uri: options.httpUri
  });
  
  // Create the subscription websocket link if available
  if (options.wsUri) {
    const wsLink = new WebSocketLink(
      new SubscriptionClient(options.wsUri, {
        lazy: true,
        reconnect: true,
        connectionParams: {
          headers: {
            Authorization: `Bearer ${token}`
          }
        }
      })
    );
  
    // using the ability to split links, you can send data to each link
    // depending on what kind of operation is being sent
    link = split(
      // split based on operation type
      ({ query }) =&gt; {
        const definition = getMainDefinition(query);
        return (
          definition.kind === &quot;OperationDefinition&quot; &amp;&amp;
          definition.operation === &quot;subscription&quot;
        );
      },
      wsLink,
      link
    );
  }
  
  const authLink = setContext((_, { headers }) =&gt; {
    // return the headers to the context so httpLink can read them
    return {
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : &quot;&quot;
      }
    };
  });
  const errorLink = onError(({ graphQLErrors, networkError }) =&gt; {
    if (graphQLErrors)
      graphQLErrors.map(({ message }) =&gt; {
        if (message.includes(&quot;unauthorized&quot;)) {
          EventBus.$emit(&quot;unauthorized&quot;);
        }
      });
  
    if (networkError) console.log(`[Network error]: ${networkError}`);
  });
  
  const apolloClient = new ApolloClient({
    link: ApolloLink.from([errorLink, authLink, link]),
    cache: new InMemoryCache(),
    connectToDevTools: true
  });
  
  const apolloProvider = new VueApollo({
    defaultClient: apolloClient
  });
  </code></pre>
  <p>When I try to run the subscription I get</p>
  <blockquote>
  <p>HTTP Authentication failed; no valid credentials available</p>
  </blockquote>
  <p>And in the ws request header I cannot see my Authorization bearer set.</p>
  <p>A side info I need authorization for both http and ws requests</p>