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

Posted 2023-03-10

【中文标题】如何重新运行 Vue.js ApolloClient 中间件？

【英文标题】：How can I re-run Vue.js ApolloClient middleware?

【发布时间】：2018-01-09 17:35:07

【问题描述】：

在我的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
)

希望你能理解我想要做什么？

谢谢

【参考方案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()    ])

【讨论】：

天哪。真的那么容易吗？我想我今天盯着屏幕看太久了。谢谢你的帮助。它成功了！