Question

相当新的，所以任何帮助非常感谢。我知道如何使用Apollo客户端进行身份验证，但是当我向我的Vue-cli-3生成项目添加新的vue-apollo-plugin（https://www.npmjs.com/package/vue-apollo）时。我不明白如何以及在何处配置我的authMiddleware。

以下是cli的自动生成文件：

＆＃13;

#include <iostream>
#include <cstdlib>

using namespace std;

long long counter = 0, k;

void Parentheses(int n);
void parent(int l, int r, string s);

int main()
{
    int n;
    cin >> n >> k;
    Parentheses(n);
}

void Parentheses(int n)
{
    parent(n/2, n/2, "");
}

void parent(int l, int r, string s)
{
    if (l == 0 && r == 0)
    {
        counter++;
        if (counter == k)
        {
            cout << s;
            exit(0);
        }
    }
    if (l > r)
        return;
    if (l > 0)
        parent(l-1, r, s + "(");
    if (r > 0)
        parent(l, r-1, s + ")");
}

＆＃13;

我之前通过标题使用了以前用于身份验证的内容：

＆＃13;

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

＆＃13;

似乎当我从vue-apollo包中深入挖掘一些导入的对象时，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) })对象中已经内置了这样的属性：

＆＃13;

createApolloClient

＆＃13;

这是否意味着我可以简单地从authLink = setContext(function (_, _ref2) { var headers = _ref2.headers; return { headers: _objectSpread({}, headers, { authorization: getAuth(tokenName) }) }; });对象中解构出属性？任何帮助或提示非常感谢。

Answer 1

看看vue-cli-plugin-apollo

您可以在link: authLink的{{1}}中传递getAuth:()=>{return "something"}和/或const defaultOptions = { ... }。

或在/vue-apollo.js中致电main.js

createProvider

如果在authLink中添加标头，则同时使用两者，getAuth可能是多余的。

如果您打算使用多个链接，则可以使用apollo-link软件包new Vue({ // router, store apolloProvider: createProvider({ link: authLink, getAuth: AUTH_TOKEN => localStorage.getItem(AUTH_TOKEN) }), // ... })

vue-apollo 3.0.0 Beta配置

1 个答案: