如何重新运行Vue.js ApolloClient中间件？

Question

In my main.js I have some code that checks for the existence of a localStorage item. If it has it, it will add an Authorization header via middleware to the ApolloClient setup.

However, if a localStorage item is later added , it's not present in the middleware of main.js . A full page refresh is therefore required in order to get it to pick it up / know of its existence.

How can I run main.js again (if that's even the solution) from a method in say, a component that signs the user in?

Here's my 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
})

Hopefully you can understand what I'm trying to do?

Thanks

Answer 1

I believe you need to move your requestToken declaration inside the applyMiddleware function. This way, you'll check local storage for a token every time a request is made. Otherwise, it's only checked once, when the page is loaded and you end up seeing the behavior you described.

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()   } }])