javascript - 使用 React TypeScript 进行 GraphQL 身份验证

Question

我有一个登录页面，当用户单击提交按钮时，我想从 GraphQL API 中可用的数据中检查用户的身份验证。我尝试按照本教程进行操作：

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>
    );
  }
}

标签： javascriptreactjstypescriptgraphqlapollo

Answer 1

您需要先创建一个突变！这将为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}})