Vue.js ApoloClient 미들웨어를 재실행하려면 어떻게 해야 하는가?

Vue.js ApoloClient 미들웨어를 재실행하려면 어떻게 해야 하는가?

나의main.jslocalStorage 항목의 존재를 확인하는 코드가 몇 개 있다.만약 그것이 있다면, 그것은 추가될 것이다.Authorization머리글을 미들웨어를 통해 ApoloClient 설정으로 이동하십시오.

그러나 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
})

내가 하려는 일을 네가 이해할 수 있기를 바라?

고마워요.

난 네가 움직일 필요가 있다고 믿는다.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()   } }])

참조URL: https://stackoverflow.com/questions/45461745/how-can-i-re-run-vue-js-apolloclient-middleware