Seeking guidance as a newcomer in this field. I have experience with Authentication using Apollo client, but I'm stuck when trying to integrate the new vue-apollo-plugin into my Vue-cli-3 generated project. Specifically, I'm confused about how and where to configure my authMiddleware.
Here is the auto-generated file from the CLI:
import Vue from 'vue'
import VueApollo from 'vue-apollo'
import { createApolloClient, restartWebsockets } from 'vue-cli-plugin-apollo/graphql-client'
// Install the Vue plugin
Vue.use(VueApollo)
// Name of the localStorage item
const AUTH_TOKEN = 'apollo-token'
// Configuration settings...
I previously used authentication via the header:
const authMiddleware = new ApolloLink((operation, forward) => {
// Adding authorization to headers
const token = localStorage.getItem(AUTH_TOKEN)
operation.setContext({
headers: {
authorization: token ? `Bearer ${token}` : null
}
})
return forward(operation)
})Upon further exploration of the vue-apollo package, I noticed that within the createApolloClient object, there's a built-in property called authLink. It appears to simplify the process:
authLink = setContext(function (_, _ref2) {
var headers = _ref2.headers;
return {
headers: _objectSpread({}, headers, {
authorization: getAuth(tokenName)
})
};
}); Does this mean I can directly utilize the authLink property from the createApolloClient object? Any tips or insights would be greatly appreciated.