Проверка подлинности GraphQL с использованием React TypeScript - PullRequest
Новая
       2

Проверка подлинности GraphQL с использованием React TypeScript

0 голосов
/ 22 февраля 2020

У меня есть страница входа, и когда пользователь нажимает кнопку «Отправить», я хочу проверить аутентификацию пользователя по данным, доступным в API GraphQL. Я пытался следовать этому руководству:

https://www.apollographql.com/docs/react/networking/authentication/

На своей площадке GraphQL я использую эту мутацию, после которой мне возвращается токен. 

mutation{
             loginEmail(email: "${this.state.email}",
             password: "${this.state.password}")
          }`,

Однако я могу просто выяснить, как интегрировать это в мой код. Где именно я должен передать имя пользователя и пароль? Если я вызываю _AuthLink на моей кнопке, я получаю ошибки перегрузки.

Вот мой код для страницы входа: 

export default class LoginPage extends Component <{}, { email: string,password: string, loggedIn: boolean}>{
  constructor(props: Readonly<{}>) {
    super(props);
    this.state = {
      email: '',
      password: '',
      loggedIn: false,
    };
  }

  _httpLink = createHttpLink({
    uri: 'https:myapilink/graphql',
  });

  _AuthLink = setContext((_, { headers }) => {
    // get the authentication token from local storage if it exists
    const token = localStorage.getItem('token');
    // return the headers to the context so httpLink can read them
    return {
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : "",
      }
    }
  });

  _client = new ApolloClient({
    link: authLink.concat(httpLink),
    cache: new InMemoryCache()
  });

  render() {
    return (
      <Container component="main" maxWidth="xs">
        <CssBaseline />
        <div style={{
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center'}}>
          <Avatar>
            <LockOutlinedIcon />
          </Avatar>
          <Typography component="h1" variant="h5">
            Sign in
          </Typography>
          <form style={{width: '100%'}} noValidate>
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              id="email"
              label="Email Address"
              name="email"
              autoComplete="email"
              autoFocus
              onChange={e => {
                this.setState({email: e.target.value})
              }}
            />
            <TextField
              variant="outlined"
              margin="normal"
              required
              fullWidth
              name="password"
              label="Password"
              type="password"
              id="password"
              autoComplete="current-password"
              onChange={e => {
                this.setState({password: e.target.value})
            }}
            />
            <FormControlLabel
              control={<Checkbox value="remember" color="primary" />}
              label="Remember me"
            />
            <br></br>
            <Button className='button-center'
            //onClick={this._AuthLink}
            >
            Submit</Button>
            <br></br>
            <Grid container>
              <Grid item xs>
                <Link href="#" variant="body2">
                  Forgot password?
                </Link>
              </Grid>
              <Grid item>
                <Link href="#" variant="body2">
                  {"Don't have an account? Sign Up"}
                </Link>
              </Grid>
            </Grid>
          </form>
        </div>
        <Box mt={8}>
          <Copyright />
        </Box>
      </Container>
    );
  }
}

1 Ответ

0 голосов
/ 23 февраля 2020

Сначала нужно создать мутацию! Это даст вам mutate функцию, которую вы можете передавать переменные и так далее. Взгляните на этот пример; 

const AddTodo = () => {
  let input;

  return (
    <Mutation mutation={ADD_TODO}>
      {(addTodo, { data }) => (
        <div>
          <form
            onSubmit={e => {
              e.preventDefault();
              addTodo({ variables: { type: input.value } });
              input.value = '';
            }}
          >
            <input
              ref={node => {
                input = node;
              }}
            />
            <button type="submit">Add Todo</button>
          </form>
        </div>
      )}
    </Mutation>
  );
};

Обратите внимание, как мы передаем сюда переменные addTodo({ variables: { type: input.value } });, вы должны отправить имя пользователя и пароль вместо type.

Вы можете что-то сделать как; 

login({variables: {username: this.state.username, password: this.state.password}})
...