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

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

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

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

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

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

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

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

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

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

    • Перейти к логину, если нет JWT

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

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

    • Go to birds list (does not show data because apollo initilised in main 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,
})

LOGIN.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


android vue.js graphql nativescript-vue vue-apollo
person Cem Kaan    schedule 29.03.2020    source источник
comment
Есть ли способ расширить провайдера Apollo   -  person Cem Kaan    schedule 29.03.2020
comment
apollographql.com/docs/link/links/context Я красный apollo- документация по контексту ссылок. Но мой токен находится внутри состояния Vuex. Как установить заголовки?   -  person Cem Kaan    schedule 31.03.2020
comment
следует ли использовать локальное состояние vue-apollo вместо состояния vuex? Или я могу передать данные состояния Vuex.store в локальное состояние Vue Apollo?   -  person Cem Kaan    schedule 31.03.2020
comment
Вы пробовали запустить свой клиент в другом файле, куда вы вместо этого импортируете магазин?   -  person Bhaskar    schedule 03.04.2020
comment
Если я инициализирую клиента не из основного файла, то будут две копии клиента apollo: одна в основном файле , обрабатывающая автоматический вход, а другая - в компоненте. который будет обрабатывать обычный вход.   -  person Cem Kaan    schedule 06.04.2020
comment
Я не очень понимаю структуру вашего проекта. У меня лично есть клиент, инициализированный в какой-то момент, который я импортирую на протяжении всего проекта, что касается сценариев входа в систему, у меня есть единственная функция входа в систему, а затем, если мне нужно выполнить автоматический вход (скажем, используя ключ авторизации в файлах cookie), я делаю это с помощью крючок жизненного цикла самой страницы авторизации ... но используемая функция остается той же, что и клиент ...   -  person Bhaskar    schedule 07.04.2020
comment
Зачем вообще нужна бизнес-логика в файле main.js? Просто инициализируйте свой apolloClient там (или в другом файле и экспортируйте). В вашем файле app.vue (который изначально будет показывать компоненты аутентификации) используйте клиент в хуке жизненного цикла для автоматического входа, и если он не удастся, просто оставайтесь на странице входа , если это удастся, перейдите на домашнюю страницу.   -  person Bhaskar    schedule 07.04.2020
comment
@bhaskar Я попробую ваше предложение и дам вам знать. На данный момент я не знаю, могу ли я инициализировать apollo в основном файле, а затем добавить заголовки в файл входа.   -  person Cem Kaan    schedule 07.04.2020

Ответы (1)


arrow_upward
2
arrow_downward

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

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

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

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

Функция setContext принимает функцию, которая возвращает либо объект, либо обещание, которое возвращает объект, для установки нового контекста запроса. Добавьте приведенный ниже код в app.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 
})

Изменить в Login.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);
},

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

person Varit J Patel    schedule 09.04.2020
comment
Вы сохранили токен и используете его в main.js. То, что вам нужно для передачи токена, - это apollo-link-context. У меня нет Android, поэтому я сказал, что он не будет работать на моем Mac. - person Varit J Patel; 10.04.2020
comment
@cemkaan Я добавил обновленный ответ на вопрос, как вы можете сохранить токен и получить его в промежуточном программном обеспечении. Надеюсь, теперь это ясно. - person Varit J Patel; 10.04.2020
comment
Ты проверил? Это будет происходить по мере прохождения через него всех запросов. не думайте, что это находится в файле main.js, поэтому это не сработает. Для каждого запроса, который вы делаете, он будет обходить apollo-link-context и добавлять заголовки, если токен существует. - person Varit J Patel; 10.04.2020