Vue.js ApolloClientミドルウェアを再実行するにはどうすればよいですか？

Question

私のmain.jsには、localStorageアイテムの存在を確認するいくつかのコードがあります。それがある場合は、ミドルウェア経由でApolloClientセットアップにAuthorizationヘッダを追加します。

ただし、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 
}) 

うまくいけば、私がやろうとしているかを理解することができますか？私はあなたがapplyMiddleware関数内でごrequestToken宣言を移動する必要があると考えてい

おかげ

Answer 1

。この方法では、要求が行われるたびにトークンをローカルストレージにチェックインします。それ以外の場合は、ページが読み込まれて、説明した動作が表示されるまで、一度だけチェックされます。

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