vue-apollo 3.0.0 Beta配置

Question

非常新的，所以任何幫助非常贊賞。 我知道如何使用Apollo客戶端進行身份驗證，但是當我向我的Vue-cli-3生成項目添加新的vue-apollo-plugin（ https://www.npmjs.com/package/vue-apollo ）時。 我不明白如何以及在何處配置我的authMiddleware。

這是cli的自動生成文件：

 import Vue from 'vue' import VueApollo from 'vue-apollo' import { createApolloClient, restartWebsockets } from 'vue-cli-plugin-apollo/graphql-client' // Install the vue plugin Vue.use(VueApollo) // Name of the localStorage item const AUTH_TOKEN = 'apollo-token' // Config const defaultOptions = { httpEndpoint: process.env.VUE_APP_GRAPHQL_HTTP || 'http://localhost:4000', // Use `null` to disable subscriptions wsEndpoint: process.env.VUE_APP_GRAPHQL_WS || 'ws://localhost:4000', // LocalStorage token tokenName: AUTH_TOKEN, // Enable Automatic Query persisting with Apollo Engine persisting: false, // Use websockets for everything (no HTTP) // You need to pass a `wsEndpoint` for this to work websocketsOnly: false, // Is being rendered on the server? ssr: false, // Additional ApolloClient options // apollo: { ... } // Client local data (see apollo-link-state) // clientState: { resolvers: { ... }, defaults: { ... } } } // Call this in the Vue app file export function createProvider (options = {}) { // Create apollo client const { apolloClient, wsClient } = createApolloClient({ ...defaultOptions, ...options, }) apolloClient.wsClient = wsClient // Create vue apollo provider const apolloProvider = new VueApollo({ defaultClient: apolloClient, defaultOptions: { $query: { // fetchPolicy: 'cache-and-network', }, }, errorHandler (error) { // eslint-disable-next-line no-console console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message) }, }) return apolloProvider } // Manually call this when user log in export async function onLogin (apolloClient, token) { localStorage.setItem(AUTH_TOKEN, token) if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient) try { await apolloClient.resetStore() } catch (e) { // eslint-disable-next-line no-console console.log('%cError on cache reset (login)', 'color: orange;', e.message) } } // Manually call this when user log out export async function onLogout (apolloClient) { localStorage.removeItem(AUTH_TOKEN) if (apolloClient.wsClient) restartWebsockets(apolloClient.wsClient) try { await apolloClient.resetStore() } catch (e) { // eslint-disable-next-line no-console console.log('%cError on cache reset (logout)', 'color: orange;', e.message) } } 

我有以前通過標題用於身份驗證的內容：

 const authMiddleware = new ApolloLink((operation, forward) => { // add the authorization to the headers const token = localStorage.getItem(AUTH_TOKEN) operation.setContext({ headers: { authorization: token ? `Bearer ${token}` : null } }) return forward(operation) }) 

似乎當我從vue-apollo包中深入挖掘一些導入的對象時，在createApolloClient對象中已經內置了類似的東西，它具有以下屬性：

 authLink = setContext(function (_, _ref2) { var headers = _ref2.headers; return { headers: _objectSpread({}, headers, { authorization: getAuth(tokenName) }) }; }); 

這是否意味着我可以簡單地從createApolloClient對象中createApolloClient屬性？ 任何幫助或提示非常感謝。

Answer 1

看看vue-cli-plugin-apollo

您可以在/vue-apollo.js中的const defaultOptions = { ... }中傳遞一個link: authLink和\\或getAuth:()=>{return "something"} 。

或者在調用createProvider時在main.js

new Vue({
  // router, store
  apolloProvider: createProvider({
    link: authLink,
    getAuth: AUTH_TOKEN => localStorage.getItem(AUTH_TOKEN)
  }),
  // ...
})

如果在authLink中添加標頭，則使用兩者，getAuth可能是多余的。

• 如果您計划使用多個鏈接，則有apollo-link包link: ApolloLink.from([ ... ])