Как добавить заголовки в логин. vue?

Question

Как обновить заголовки apolloProvider?

Пожалуйста, ознакомьтесь с nativescript- vue репо приложения:

https://github.com/kaanguru/vue-apollo-login

Я могу не объяснить должным образом, поэтому, пожалуйста, проверьте приложение. Я не знаю, как обновить заголовки appolloClient.

В репозитории приложений есть свои комментарии и директивы. Его легко установить и увидеть самостоятельно.

Текущая структура кода:

Почтовый запрос отправляет идентификатор пользователя и пароль для аутентификации, а получает токен на странице входа. .

Apollo должен поместить токен jwt в заголовок авторизации.

• Main. js: запустить клиент apollo, если JWT запускается с заголовками

  • Перейти в систему, если JWT отсутствует

  • Перейти в список птиц, если есть JWT

• Логин: получить jwt с сервера и записать его в локальное хранилище

  • Go в список птиц (данные не отображаются, поскольку apollo инициализирован в основном js)

import ApolloClient from 'apollo-boost'
import VueApollo from 'vue-apollo'

Vue.use(VueApollo)

const apolloClient = new ApolloClient({
  uri: 'http://sebapi.com/graphql',

// HEADERS WORK FINE IF TOKEN WAS IN MAIN
//   headers: {
//     authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNTg2MzU2NzM2LCJleHAiOjE1ODg5NDg3MzZ9.wpyhPTWuqxrDgezDXJqIOaAIaocpM8Ehd3BhQUWKK5Q`,
// }

})
const apolloProvider = new VueApollo({
  defaultClient: apolloClient,
})

ВХОД. VUE

.then(
          (response) => {
            const result = response.content.toJSON();
            console.log("Result from Server: ", result);
            const token = result.jwt;

            // HOW TO ADD HEADERS TO APOLLOCLIENT this.$apollo.provider.defaultClient

            // this.$apollo.provider.defaultClient({
            //   request: (operation) => {
            //     operation.setContext({
            //       headers: {
            //         authorization: `Bearer ${result.jwt}` ,
            //       },
            //     });
            //   },
            // });

          },

Спасибо за проявленный интерес.

ПРИМЕЧАНИЕ : Прокомментируйте, пожалуйста, для более подробной информации. Серверная часть sebapi.com является сервером strapi graphql.

Документы по теме:

Аутентификация Apollo

Ссылка Apollo состав

Vue apolloProvider Использование

Answer 1

Дело в том, что вам нужно использовать ApolloLink, чтобы использовать его для всех запросов. То, как вы используете, не сработает.

Для этого вам нужно использовать промежуточное ПО apollo-link-context.

Согласно Документы Apollo-link-context

apollo-link-context: используется для установки контекста вашей операции, который используется другими ссылками, расположенными далее по цепочке.

Функция setContext принимает функцию, которая возвращает либо объект или обещание, которое возвращает объект для установки нового контекста запроса. Добавьте приведенный ниже код в приложение. js, измените некоторые изменения и проверьте.

import { setContext } from 'apollo-link-context'

const authLink = setContext((_, { headers }) => {
    // get the authentication token from ApplicationSettings if it exists
    const token = ApplicationSettings.getString("token");

    // return the headers to the context so HTTP link can read them
    return {
        headers: {
            ...headers,
            authorization: token ? `Bearer ${token}` : null
        }
    }
})

// update apollo client as below
const apolloClient = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache() // If you want to use then 
})

Смена логина. vue

.then(
    (response) => {
    const result = response.content.toJSON();
    console.log("Result from Server: ", result);
    const token = result.jwt;
    // Set token using setString
    ApplicationSettings.setString("token", result.jwt);
},

Надеюсь, это поможет!