我在我的Vue应用程序中使用Vue Apollo和Vuex时遇到了问题，所以当我首次登录网站时，网页是空的，即不包含事件和身份验证，但是当我使用浏览器中的刷新按钮刷新网站时，所有事件都会加载，甚至在网络选项卡中也可以看到身份验证。请问有人可以告诉我我做错了什么吗？

graphql.js

import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { createApolloProvider } from '@vue/apollo-option';
import { onError } from '@apollo/client/link/error';

onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
      ),
    );
  
  if (networkError) {
    networkError.message = networkError.result.errors[0].debugMessage
    console.log(`[Network error]: ${networkError}`)
  };
});

const XPORTAL = process.env.VUE_APP_XPORTAL

function getHeaders() {
  const headers = {};

  const token = window.localStorage.getItem("apollo-token");
  if (token) {
    headers["Authorization"] = `Bearer ${token}`;
  }
  headers["x-portal"] = XPORTAL;
  headers["X-Requested-With"] = "XMLHttpRequest";

  return headers
}

let GRAPHQL = process.env.VUE_APP_API_GRAPHQL
let GRAPHQLPORTAL = process.env.VUE_APP_API_GRAPHQLPORTAL

const graphqlClient = new ApolloClient({
  link: new HttpLink({uri: GRAPHQL, headers: getHeaders()}),
  cache: new InMemoryCache()
});

const graphqlClientPortal = new ApolloClient({
  link: new HttpLink({ uri: GRAPHQLPORTAL, headers: getHeaders()}),
  cache: new InMemoryCache()
});

export function provider() {
  const provider = createApolloProvider({
      clients: {
        graphqlClient,
        graphqlClientPortal
      },
      defaultClient: graphqlClient,
      defaultOptions: {
      $query: {
        fetchPolicy: 'cache-and-network'
      }
    },
  })
  return provider
}

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import * as apolloProvider from "../../events.live/src/utils/graphql";

const app = createApp(App);
app.use(apolloProvider.provider)
app.use(store);
app.use(router);
app.mount("#app");

index.js

import { provider } from "../utils/graphql";

actions: {
  async fetchLogin({ commit, state }) {
      return new Promise(async (resolve, reject) => {
        commit('loadingStatus', true)
        try {
          const response = await provider().clients.graphqlClient.mutate({
            mutation:
              gql`mutation Login($email:String!, $password:String!)
              {
                login(email:$email, password:$password){
                  token
                }
              }`, variables: {
              email: state.login.email,
              password: state.login.password
            }
          })
          const token = response.data.login.token
          commit('setToken', token)
          localStorage.setItem('apollo-token', token)
        } catch (error) {
          commit('loadingStatus', false)
        }
        resolve()
      })
    },
  {

  async fetchEvents({ commit }) {
      try {
        const response = await provider().clients.graphqlClientPortal.query({
          query: gql`
            query LiveEvents($limit: Int!, $page: Int!){
              liveEvents(pagination:{limit:$limit, page:$page}, order:{startsAt:{direction: DESC}}){
                total,
                data{
                  id,
                  name,
                  stub,
                  description,
                  mainImage{
                    id,
                    uri
                  },
                  location,
                  type,
                  layout
                  chat,
                  liveStream{
                    endsAt,
                    startsAt
                  }
                }
              }
            }
          `, variables: {
            limit: 12,
            page: 0
          },
        });
        commit('allEvents', response.data.liveEvents.data);
      } catch (error) {
        console.log('error-message', error.graphQLErrors)
      }
    },