我怎样才能 re-run Vue.js ApolloClient 中间件?
How can I re-run Vue.js ApolloClient middleware?
在我的 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
})
希望你能明白我在做什么?
谢谢
我认为您需要将 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() } }])
在我的 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
})
希望你能明白我在做什么?
谢谢
我认为您需要将 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() } }])