如何解决使用 Apollo 和 React-native 的身份验证问题
我有这个身份验证问题
注册完美服务器获取注册数据 用户密码邮箱和号码 这一步后,我有OTP验证
我获得了 PIN 码并运行了验证突变。 在验证时,我收到错误:
您未通过身份验证
所有过程都停止了,因为我没有得到验证
这里是 react-native 部分的代码
const VERIFY = gql
mutation($token: String!,$kind: TokenKind!) { 验证(令牌:$token,种类:$kind) } const VerificationScreen: React.FC = (props) => {
const token = (props as any).route.params.token;
const [loading,setLoading] = React.useState(false)
const [pin,setPin] = useState('')
const [veryfy] = useMutation(VERIFY)
const verifyPin = () => {
if (!pin) {
alert('Please TYPE Valid PIN')
return;
}
//veryfy
setLoading(true);
veryfy({
variables: {
token: pin,kind: 'PHONE'
}
})
.then(({ data }) => {
setLoading(false)
console.log(data);
if (data) {
props.navigation.navigate('Intro',{ token: token });
}
})
.catch((e) => {
setLoading(false)
console.log(e);
})
}
提前致谢
解决方法
const getClient = () => {
// create link middleware see [1]
const authMiddleware = new ApolloLink((operation,forward) => {
// code block below assumes there exists an auth token in globals
// add headers with the client context [2]
operation.setContext(({ headers = {} }) => {
// auth header using global token as a bearer token
const authHeaders = {
Authorization: global.access_token
? `Bearer ${global.access_token}`
: "",};
// here an Authorization header can be passed in thru the context,// which can be useful,eg for testing
const { isAuth,Authorization } = headers;
// if we have an Auth.. header we can just add that and return
if (Authorization) {
return {
headers: { ...publicHeaders,...{ Authorization } },};
}
const header = isAuth
? { ...publicHeaders,...authHeaders }
: publicHeaders;
return {
headers: header,};
});
return forward(operation);
}); // end create middleware
// create the graphql endpoint [1]
const httpLink = new HttpLink({ uri: '/graphql' });
// create client with the middleware and return the client
// code block below assumes there exists a globalCache
return new ApolloClient({
cache: globalCache,link: concat(authMiddleware,httpLink),});
}
使用
// add/configure the appropriate headers in the context block
// for the client
client
.mutate({
mutation: <some mutation>,variables: <some variables>,context: {
headers: {
isAuth: false,// or true for authenticated operation
},},})
.then((result) => ....)
.catch((err) => {
console.log(....);
});
在钩子中使用
const [runMutation,{ data }] =
useMutation(<gql>,{
context: {
headers: { isAuth: true },variables: <some vars>,onCompleted: (data) => callback(data),onError: (error) => console.error("Error ",error),});
链接
1 middleware
2 context
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。