Question

我有一个 api 在我的 axios 实例中使用的 url 上运行。如果提供有效凭据，则为登录定义了一个路由，该路由返回 JWT 访问和刷新令牌。我可以使用邮递员对其进行测试，并且一切正常，但是在我使用 axios 的应用程序中，即使使用有效凭据也不会返回任何令牌或错误。该 API 也已为 cors 设置并且正在实时运行。

这里是 axios 实例：

import axios from 'axios';

const url = NOT SHOWN;

const axiosInstance = axios.create({
  baseURL: url,
  headers: {
    'Content-Type': 'application/json',
  },
});

export default axiosInstance;

这里是基本的登录组件：

import React, { Component } from 'react';
import { Link as RouteLink, Redirect } from 'react-router-dom';
import axiosInstance from '../../axiosInstance';

//material ui
import Button from '@material-ui/core/Button';
import CssBaseline from '@material-ui/core/CssBaseline';
import TextField from '@material-ui/core/TextField';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Link from '@material-ui/core/Link';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';

class Login extends Component {
  state = {
    email: '',
    password: '',
    isAuthenticated: false,
  };

  login(email, password) {
    const data = {
      email: email,
      password: password,
    };
    axiosInstance
      .post('/login', data)
      .then((res) => {
        console.log(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }

  onSubmit = (e) => {
    const { email, password } = this.state;
    this.login(email, password);
  };

  onChange = (e) => this.setState({ [e.target.name]: e.target.value.trim() });

  render() {
    if (this.state.isAuthenticated) {
      return <Redirect to='/' />;
    }
    return (
      <Container component='main' maxWidth='xs' style={{ marginTop: '75px' }}>
        <CssBaseline />
        <div>
          <Typography component='h1' variant='h3' align='center'>
            Login
          </Typography>
          <form noValidate>
            <TextField
              variant='outlined'
              margin='normal'
              required
              fullWidth
              id='email'
              label='Email Address'
              name='email'
              autoComplete='email'
              autoFocus
              onChange={this.onChange}
            />
            <TextField
              variant='outlined'
              margin='normal'
              required
              fullWidth
              name='password'
              label='Password'
              type='password'
              id='password'
              autoComplete='current-password'
              onChange={this.onChange}
            />
            <FormControlLabel
              control={<Checkbox value='remember' color='primary' />}
              label='Remember me'
            />
            <Button
              type='submit'
              fullWidth
              variant='contained'
              color='primary'
              //className={classes.submit}
              onClick={this.onSubmit}
            >
              LOGIN
            </Button>
            <Grid container>
              <Grid item xs>
                <Link variant='body2'>Forgot password?</Link>
              </Grid>
              <Grid item>
                <Link component={RouteLink} to={'/signup'} variant='body2'>
                  {"Don't have an account? Sign Up"}
                </Link>
              </Grid>
            </Grid>
          </form>
        </div>
      </Container>
    );
  }
}

export default Login;

'''

Answer 1

我相信登录函数没有正确定义，所以没有被调用。请尝试使用函数表达式：

onSubmit() {
    this.bayService.selectedBayChanged(this.bayForm.get('bayStart').value);
    this.subscription = this.bayService.invalidBay.subscribe(value => {
        if (value) {
            this.navCtrl.navigateForward([`/results/`]);
        } else {
            this.bayDoesNotExistError = true;
            this.selectedBay = this.bayForm.get('bayStart').value;
            this.vibration.vibrate(500);
            console.log('Vibrating for 3 second...')
        }
    })
}

为什么我的 axios 请求不会返回正确的数据？

1 个答案: