私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
})
うまくいけば、私がやろうとしていることを理解できますか?
ありがとう