vue-apollo 3.0.0 Бета-конфигурация - PullRequest
Новая
       38

vue-apollo 3.0.0 Бета-конфигурация

0 голосов
/ 10 июня 2018

Довольно новый в этом, поэтому любая помощь высоко ценится.Я знаю, как выполнить аутентификацию с помощью клиента Apollo, но когда я добавляю в свой проект, сгенерированный Vue-cli-3, новый vue-apollo-plugin (https://www.npmjs.com/package/vue-apollo). Я не понимаю, как и где настроить мое authMiddleware.

Вот автоматически сгенерированный файл из файла: 

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?Любая помощь или советы высоко ценится.

1 Ответ

0 голосов
/ 23 апреля 2019

Взгляните на vue-cli-plugin-apollo

Вы можете передать link: authLink и \ или getAuth:()=>{return "something"} в const defaultOptions = { ... } в /vue-apollo.js.

Или в main.js, когда вы звоните createProvider

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

, используя оба, если вы добавляете заголовок в authLink, getAuth, вероятно, избыточен.

  • , если вы планируетедля использования более одной ссылки существует пакет apollo-link link: ApolloLink.from([ ... ])
...