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

问题描述

请查看nativescript-vue应用回购:

Please check out nativescript-vue app repo:

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

我无法正确解释，因此请签出该应用. 我不知道如何更新appolloClient标头.

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.

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

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

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

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

• Main.js:如果存在以标题开头的JWT，则启动apollo客户端

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

• 如果没有JWT，请转到登录名

• Goto login if there is no JWT

如果有JWT，则转到鸟的名单

Goto birds list if there is JWT

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

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

• 转到鸟类列表(由于阿波罗在主要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

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后端是一个trapi graphql服务器.

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

相关文档:

Apollo身份验证

阿波罗链接组成

Vue apolloProvider的使用

推荐答案

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

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.

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

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

根据 Apollo-link-context文档

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

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

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

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

Login.vue的更改

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

希望这会有所帮助！

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