Vue Apollo自动刷新令牌实现

hen*_*ool 5 apollo vue.js apollo-client vue-cli vue-apollo

我正在尝试对我的 SPA 实施 JWT 身份验证,登录和注销已完成,但我无法找出实施刷新令牌的正确(或只是工作)方法,任何帮助将不胜感激!

我找不到任何有关通过 Vue Appollo 处理刷新令牌的教程。有“ Vue CLI Apollo 插件

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

但没有关于实现它的示例,并且看起来“Vue CLI Apollo 插件”已被弃用,它长时间更新并且无法与 VUE CLI 4 一起使用。

当前的前端堆栈是:

Vue-cli 4.5,
Apollo/client 3.5.8
Vue-apollo-option 4.0.0
Graphql 16.3.0
Vuex 4.0
Run Code Online (Sandbox Code Playgroud)

我的 vue-apollo.js 配置:

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;
}
Run Code Online (Sandbox Code Playgroud)

那么,现在可以在authMiddleware的帮助下登录、存储令牌、在每个请求中粘贴令牌,但是在哪里以及如何实现令牌刷新?预先感谢您的任何帮助!