请查看nativescript-vue应用回购:
Please check out nativescript-vue app repo:
github/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: 'sebapi/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后端是一个trapi graphql服务器.
NOTE: Please comment for more details. sebapi 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中添加标题?
发布评论