如何在 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 服务器.
相关文档:
问题是您需要使用 ApolloLink 以便将其用于所有请求.您使用的方式不起作用.
您必须使用中间件 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:
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屋!