如何在login.vue中添加标题？

如何更新 apolloProvider 的标头？

请查看 nativescript-vue 应用程序存储库：

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

我无法正确解释，所以请查看该应用程序。我不知道如何更新 appolloClient 标头。

应用程序存储库有自己的注释和指令。您可以轻松安装和查看。

当前代码结构：

Post请求提交用户的标识符和密码凭据以进行身份​​验证和获取令牌在登录页面。

Apollo 需要将 jwt 令牌放入 Authorization 标头中。

• Main.js：如果有 JWT 以标头开头，则启动 apollo 客户端

  • 如果没有 JWT 则转到登录

  • 如果有智威汤逊，请转到鸟类列表

• 登录：从服务器获取jwt并将其写入本地存储

  • 前往鸟类列表（不显示数据，因为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}` ,
            //       },
            //     });
            //   },
            // });

          },

感谢您的关注。

NOTE: 请评论了解更多详情。 sebapi.com 后端是一个 Strapi graphql 服务器。

相关文档：

阿波罗认证 https://www.apollographql.com/docs/react/networking/authentication/

Apollo链接组成 https://www.apollographql.com/docs/link/composition/

Vue apolloProvider 用法 https://vue-apollo.netlify.com/guide/apollo/#apollo

问题是您需要使用 ApolloLink 才能将其用于所有请求。你用的方法是行不通的。

你必须使用中间件apollo-link-context为了达成这个。

As per Apollo-link-context 文档 https://www.apollographql.com/docs/link/links/context/

apollo-link-context：用于设置操作的上下文，供链下游的其他链接使用。

The setContextfunction 接受一个返回对象的函数或返回一个对象的承诺来设置请求的新上下文。 将以下代码添加到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);
},

希望这可以帮助！