使用 Apollo 和 React-native 的身份验证问题 [英] Problem with Authentication using Apollo and React-native

问题描述

我有这个身份验证问题

注册工作正常，服务器获取注册数据:用户密码电子邮件和号码.这一步之后，我就有了OTP验证

The registration works perfectly and the servers take the registration data: User password email and number. After this step, I have OTP verification

我得到了 PIN 码并运行了验证突变.在验证时，我收到错误:

I got the pin code and run the verification mutation. On the verification, I got the error :

您未通过身份验证

所有过程都停止了，因为我没有得到验证

And the all process stops because I am not verified

这里是 react-native 部分的代码

Here is the code for the react-native part

const VERIFY = gql
mutation($token: String!, $kind: TokenKind!) {
    verify(token: $token, kind: $kind)
}
const VerificationScreen: React.FC < any > = (props) => {
        const token = (props as any).route.params.token;
        const [loading, setLoading] = React.useState < boolean > (false)
        const [pin, setPin] = useState < string > ('')
        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);
            })
        }

推荐答案

下面的代码是一个示例，展示了如何使用 Apollo 中间件 [1] 和上下文 [2] 在运行时添加标头 (auth) 或测试.首先我们创建一个中间件块，然后是一个内部上下文块.
在上下文块中我们可以使用下面的行来添加外部参数，这是配置请求

The below code is an example showing how you can use the Apollo middle-ware [1] and context [2] to add headers(auth) at runtime or testing. First we create a middle-ware block, then an inner context block.
In the context block we can use the line below to add external parameters, this is to configure the request

    const { isAuth, Authorization } = headers;

可以设置布尔值(Auth)以允许将令牌嵌入到 Authorization 标头中，或者可以直接传入现有的 Authorization 标头，这对于例如测试很有用.

A boolean(Auth) can be set to allow a token to be embedded in a Authorization header, or an existing Authorization header can be passed in directly, this can be usefull for testing for example.

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 中间件
2 上下文

这篇关于使用 Apollo 和 React-native 的身份验证问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！