Как я могу перезапустить промежуточное ПО Vue.js ApolloClient?

Question

В моем main.js У меня есть некоторый код, который проверяет наличие элемента localStorage. Если он есть, он добавит Authorization заголовок через промежуточное ПО для настройки ApolloClient.

Однако, если элемент localStorage добавлен позже, его нет в промежуточном программном обеспечении main.js, Поэтому требуется полное обновление страницы, чтобы он мог подобрать / узнать о ее существовании.

Как я могу бежать main.js опять (если это даже решение) из метода, скажем, компонента, который подписывает пользователя?

Вот мой main.js:

import Vue from 'vue'
import ApolloClient, { createNetworkInterface } from 'apollo-client'
import VueApollo from 'vue-apollo'
import App from './App'
import router from './router'
import store from './store'

const networkInterface = createNetworkInterface({ uri: 'https://api.graph.cool/simple/v1/MY-ID-HERE' })
const requestToken = localStorage.getItem('TOKEN')

networkInterface.use([{
  applyMiddleware (req, next) {
    if (!req.options.headers) {
      req.options.headers = {}
    }
    req.options.headers['Authorization'] = requestToken ? `Bearer ${requestToken}` : null
    next()
  }
}])

const apolloClient = new ApolloClient({
  networkInterface
})

const apolloProvider = new VueApollo({
  defaultClient: apolloClient
})

Vue.use(VueApollo)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App />',
  components: {
    App
  },
  apolloProvider,
  router,
  store
})

Надеюсь, вы понимаете, что я пытаюсь сделать?

Спасибо

Answer 1

Я считаю, что вам нужно переместить requestToken декларация внутри applyMiddleware функция. Таким образом, вы будете проверять локальное хранилище на наличие токена при каждом запросе. В противном случае, это проверяется только один раз, когда страница загружается, и вы в конечном итоге видите поведение, которое вы описали.

networkInterface.use([{   applyMiddleware (req, next) {
    const requestToken = localStorage.getItem('TOKEN')
    if (!req.options.headers) {
      req.options.headers = {}
    }
    req.options.headers['Authorization'] = requestToken ? `Bearer ${requestToken}` : null
    next()   } }])