如何在 login.vue 中添加标题? [英] How to add headers in login.vue?

问题描述

如何更新 apolloProvider 的 headers?

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

从apollo-boost"导入 ApolloClient从 'vue-apollo' 导入 VueApolloVue.use(VueApollo)const apolloClient = new ApolloClient({uri: 'http://sebapi.com/graphql',//如果令牌在主中，则标题工作正常//标题:{//授权:`Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwiaWF0IjoxNTg2MzU2NzM2LCJleHAiOjE1ODg5NDg3MzZ9.wpyhPTWuqxrIODgaiKDX3MzZ9，//}})const apolloProvider = new VueApollo({默认客户端:apolloClient，})

<块引用>

登录.VUE

.then((响应) =>{const 结果 = response.content.toJSON();console.log("来自服务器的结果:", result);const token = result.jwt;//如何向 APOLLOCLIENT 添加头文件 this.$apollo.provider.defaultClient//this.$apollo.provider.defaultClient({//请求:(操作)=>{//operation.setContext({//标题:{//授权:`Bearer ${result.jwt}` ,//},//});//},//});},

感谢您的关注.

注意:有关详细信息，请发表评论.sebapi.com 后端是一个 Strapi graphql 服务器.

相关文档:

阿波罗认证

阿波罗链接合成

Vue apolloProvider 使用

解决方案

问题是您需要使用 ApolloLink 以便将其用于所有请求.您使用的方式不起作用.

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

根据 Apollo-link-context 文档

<块引用>

apollo-link-context:用于为您的操作设置上下文，供链下游的其他链接使用.

setContext 函数接受一个函数，该函数返回一个对象或一个返回对象的承诺，以设置请求的新上下文.将以下代码添加到 app.js 并修改一些更改并检查.

import { setContext } from 'apollo-link-context'const authLink = setContext((_, { headers }) => {//如果存在，则从 ApplicationSettings 获取身份验证令牌const token = ApplicationSettings.getString("token");//将标头返回到上下文，以便 HTTP 链接可以读取它们返回 {标题:{...标题，授权:令牌?`Bearer ${token}` : null}}})//更新 apollo 客户端如下const apolloClient = new ApolloClient({链接:authLink.concat(httpLink),cache: new InMemoryCache()//如果你想使用那么})

Login.vue 中的变化

.then((响应) =>{const 结果 = response.content.toJSON();console.log("来自服务器的结果:", result);const token = result.jwt;//使用 setString 设置令牌ApplicationSettings.setString("token", result.jwt);},

希望这有帮助！

How to update headers of apolloProvider?

Please check out nativescript-vue app repo:

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

I can not explain properly so please check out the app. I don't know how to update appolloClient headers.

App repo has it's own comments and directives. It's easy to install and see by your self.

Current Structure of code:

Post request submits the user's identifier and password credentials for authentication and gets token in login page.

Apollo needs to place the jwt token into an Authorization header.

• Main.js: Start apollo client if there is JWT start with headers

  • Goto login if there is no JWT

  • Goto birds list if there is JWT

• Login : get jwt from server and write it to local storage

  • 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}` ,
            //       },
            //     });
            //   },
            // });

          },

Thank you for your interest.

NOTE: Please comment for more details. sebapi.com backend is a strapi graphql server.

Related Docs:

Apollo authentication

Apollo link composition

Vue apolloProvider Usage

解决方案

The thing is you need to use ApolloLink in order to use it for all the requests. The way you're using won't work.

You have to use middleware apollo-link-context to achieve this.

As per Apollo-link-context docs

apollo-link-context: Used to set a context on your operation, which is used by other links further down the chain.

The setContext function takes a function that returns either an object or a promise that returns an object to set the new context of a request. Add the below code to app.js and modify some changes and check.

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 
})

Change in 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);
},

Hope this helps!

这篇关于如何在 login.vue 中添加标题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！