Библиотека Vue. js vue -gql. Как настроить пользовательские параметры авторизации клиента vue -gql перед визуализацией компонента? - PullRequest
Новая
       17

Библиотека Vue. js vue -gql. Как настроить пользовательские параметры авторизации клиента vue -gql перед визуализацией компонента?

0 голосов
/ 07 апреля 2020

Я хотел попробовать vue -gql небольшую библиотеку для выполнения запросов graphql к моему API-интерфейсу Strapi и извлечения некоторых данных перед рендерингом моего компонента ... Проблема, с которой я столкнулся, состоит в том, что мой шаблон <Provider :client="strapiClient"> настроен с параметров, а затем выполняет рендеринг ... но перед этим мне нужно авторизовать свой компонент и настроить правильные параметры, прежде чем я смогу передать его клиенту провайдера и получить данные ... настройка выполняется в strapiClient = createClient({...options}) части.

Но проблема в том, что я могу установить это сразу, только когда я статически ввожу свой токен авторизации, я не могу понять, как бы я это сделал, если бы мне пришлось сначала получить токен аутентификации (а затем ждать токен асинхронно), а затем только настроить клиента и передать клиенту параметры шаблона <Provider :client="..."> ....

Я попытался сделать это с getStrapiToken и getStrapiClient, а затем настроить клиентский компонент, но каким-то образом это не не работает ...

Когда компонент выполняет рендеринг, он говорит, что не может найти конфигурацию клиента или просто не находит клиента, так как он не определен или null ... 

<code><template>
    // set up the configured client here...
    <Provider :client="strapiClient">
        <Query query= "{ questionDomains { name, description, question_topics {name,description, question_items {name, description}}}}"
        v-slot="{ data, fetching }">
        <div v-if="fetching">Is Fetching ...</div>
        <div v-else>
            <pre>{{ data }}
{{jwtStrapi}} import {Provider, createClient, Query} из 'vue -gql '; импортировать топор ios из топора ios; const strapi Root = 'http://localhost: 1337 /'; const strapiClient = createClient ({url: strapi Root + 'graphql', context: () => {return {fetchOptions: {headers: {// это работает только если статический заголовок Auth установлен статически Авторизация: 'bearer I6IkpXVCJ9 .......... ZMyMywiZXhwIjoxuqo '}}};}}); экспорт по умолчанию {компоненты: {поставщик, запрос}, методы: {init: asyn c function () {this.jwtStrapi = await this.getStrapiToken (); // console.log ('jwtStrapi:', jwtStrapi) // this.getStrapiClient (this.jwtStrapi)}, getStrapiToken: asyn c функция getStrapiToken (url = strapi Root + 'auth / local', data = { }) {const resp = await ax ios .post (url, {идентификатор: 'test@strapi.io', пароль: process.env.VUE_APP_STRAPI_PW}); if (resp.data.jwt) {return resp.data.jwt; } return null; }, getStrapiClient: asyn c function () {const token = await this.getStrapiToken (); if (token) {this.strapiClient = await createClient ({url: strapi Root + 'graphql', context: () => {return {fetchOptions: {headers: {Authorization: `bearer $ {this.jwtStrapi}` }}};}}); вернуть this.strapiClient; } else {this.strapiClient = await createClient ({url: strapi Root + 'graphql'}); вернуть this.strapiClient; }}}, смонтированный: function () {this.init (); }, data: function () {return {strapiClient, jwtStrapi: null}; }};
...