如何在 login.vue 中添加头部？

Question

如何在 login.vue 中添加头部？

androidvue.jsgraphqlnativescript-vuevue-apollo

5

如何更新apolloProvider的头信息？

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

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

我无法很好地解释，请查看应用程序。我不知道如何更新appolloClient标头。 应用程库有自己的注释和指令。安装和查看非常容易。

当前代码结构：

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

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

- Main.js：如果有JWT，则启动apollo客户端开始使用标头 - 如果没有JWT，则转到登录页 - 如果有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,
})

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使用

- Cem Kaan

1

有没有一种方法可以扩展Apollo提供程序？ - Cem Kaan

我阅读了Apollo-link-context文档。但是我的令牌在Vuex状态中。我该如何设置标头？ - Cem Kaan

我应该使用vue-apollo本地状态还是vuex状态？或者我可以将Vuex.store状态数据传递给Vue Apollo本地状态吗？ - Cem Kaan

你尝试在另一个文件中初始化客户端并导入存储吗？ - Bhaskar

1

为什么你的 main.js 文件中会有任何业务逻辑？只需在那里初始化你的 apolloClient（或在不同的文件中导出）。在你的 app.vue 文件中（最初显示 auth 组件），使用客户端在生命周期钩子中自动登录，如果失败，就停留在登录页面，如果成功，则转到主页。 - Bhaskar

显示剩余3条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Varit J Patel · Accepted Answer

事情是你需要使用ApolloLink来处理所有的请求。你目前的方法行不通。

你必须使用中间件apollo-link-context来实现这一点。

根据Apollo-link-context文档，

apollo-link-context：用于在操作中设置上下文，该上下文由链条下面的其他链接使用。

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

希望这有所帮助！