Vue Apollo auto refresh token implementation

Question

I am trying to implement JWT auth to my SPA, login and logout are done, but i can`t figure out the proper (or just working) way to implement refresh token, any help will be appreciated!

I couldn`t find any tutorial about handling refresh token via Vue Appollo. There is "Vue CLI Apollo plugin" with

createApolloClient({
  ...
  // Custom pre-auth links
  // Useful if you want, for example, to set a custom middleware for refreshing an access token.
  preAuthLinks: [],
  ...})

But there are no example about implementing it, and looks like "Vue CLI Apollo plugin" is deprecated, it gets bo updates for a long time and doesn`t work with VUE CLI 4.

Current frontend stack is:

Vue-cli 4.5,
Apollo/client 3.5.8
Vue-apollo-option 4.0.0
Graphql 16.3.0
Vuex 4.0

My vue-apollo.js config:

import { createApolloProvider } from "@vue/apollo-option";
import { AUTH_TOKEN } from "@/constants/settings";

import {
  ApolloClient,
  createHttpLink,
  InMemoryCache,
  ApolloLink,
} from "@apollo/client/core";

const authMiddleware = new ApolloLink((operation, forward) => {
  // add the authorization to the headers
  const token = localStorage.getItem(AUTH_TOKEN);
  operation.setContext({
    headers: {
      authorization: token ? `Bearer ${token}` : null,
    },
  });

  return forward(operation);
});

const httpLink = createHttpLink({ uri: "http://127.0.0.1:8000/graphql" });
const cache = new InMemoryCache();

export const apolloClient = new ApolloClient({
  link: authMiddleware.concat(httpLink),
  cache,
});

export function createProvider() {   
  const apolloProvider = createApolloProvider({
    defaultClient: apolloClient,
    defaultOptions: {
      $query: {
        fetchPolicy: "cache-and-network",
      },
    },
    errorHandler(error) {
      console.log("%Appollo error!", error.message);
    },
  });
  return apolloProvider;
}

So, right now a can login, store token, paste token with every request with help of authMiddleware, but where and how to implement refreshing of token? Thanks in advance for any help!

Vue Apollo auto refresh token implementation

0 Answers0