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

Question

在我的 main.js 中，我有一些代码可以检查是否存在 localStorage 项目。如果有，它将通过中间件向 ApolloClient 设置添加 Authorization header 。

但是，如果 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 函数中。这样，每次发出请求时，您都将检查本地存储中的 token 。否则，它只会在页面加载时检查一次，您最终会看到您描述的行为。

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