Update authentication.mdx

docs/source/networking/authentication.mdx

@@ -39,6 +39,7 @@ app.use(cors(corsOptions));
 
 Another common way to identify yourself when using HTTP is to send along an authorization header. Add an `authorization` header to every HTTP request by chaining together Apollo Links. In this example, we'll pull the login token from `localStorage` every time a request is sent:
 
+ReactJS example:
 ```js
 import { ApolloClient, createHttpLink, InMemoryCache } from '@apollo/client';
 import { setContext } from '@apollo/client/link/context';
@@ -64,7 +65,32 @@ const client = new ApolloClient({
   cache: new InMemoryCache()
 });
 ```
+VueJS example:
+```js
+import ApolloClient from "apollo-client";
+import { HttpLink } from "apollo-link-http";
+import { ApolloLink, concat, split } from "apollo-link";
+import { InMemoryCache } from "apollo-cache-inmemory";
+import { getMainDefinition } from "apollo-utilities";
+
+const httpLink = new HttpLink({ uri: process.env.VUE_APP_API_TARGET });
+
+const authMiddleware = new ApolloLink((operation, forward) => {
+  // add the authorization to the headers
+const token = localStorage.getItem('token');
+  operation.setContext({
+    headers: {
+      authorization: token ? `Bearer ${token}` : "",
+    },
+  });
+  return forward(operation);
+});
+export const apolloClient = new ApolloClient({
+  link: concat(authMiddleware, httpLink),
+  cache: new InMemoryCache(),
+});
 
+```
 The server can use that header to authenticate the user and attach it to the GraphQL execution context, so resolvers can modify their behavior based on a user's role and permissions.
 
 ## Reset store on logout