Блог

Я впервые работаю с API. У меня есть следующие данные. Мне нужно ОТПРАВИТЬ данные регистрации в API и ВОЙТИ в систему. Но когда я пытаюсь отправить данные в API, но получаю ошибку кода состояния 422. Я думаю, мне нужно установить заголовки, но я не знал, где и как получить токен доступа и войти в систему. Есть ли какие-либо видеоуроки или документы о них?

  'headers' => [
        'Accept' => 'application/json',
        'Authorization' => 'Bearer '.$accessToken,
    ]
    'api' => [
        [
            'method' => 'post',
            'url' => 'URL/api/register',
            'params' => [
                'query' => null,
                'body' => [
                    'phone' => ['max:255'],
                    'password' => ['min:7'],
                    'cnd' => ['0|1'],
                ]
            ],
            'response' => [
                'data' => [
                    'data':null,
                    'message':'Successfully created user!',
                    'errors':null
                ],
                'status' => 201
            ]
        ],
        [
            'method' => 'post',
            'url' => 'http://localhost:8000/api/login',
            'params' => [
                'query' => null,
                'body' => [
                    'phone' => ['max:255'],
                    'password' => ['min:7'],
                ]
            ],
            'response' => [
                'data' => [
                    'data': [
                        'access_token': 'xxxx',
                        'token_type': 'Bearer',
                        'expires_at': 'YYYY-MM-DD HH:II:SS'
                    ],
                    'message': 'User login successfully.',
                    'errors': null
                ],
                'status' => 200
            ]
        ]
  

Реагирующий код

 import React,{useState} from 'react'
import './SignUp.style.scss'
import eyeClosed from '../img/eye-closed.svg'
import eyeOpen from '../img/eye-open.svg'
import axios from 'axios'

const SignUp = () => {

    const [type, setType] = useState(false)
    const [password, setPassword] = useState(false)
    const [email, setEmail] = useState()

   const handleSubmit = (e) => {
        e.preventDefault();
        

        axios.post('https://mb.unitedskills.space/api/register', {
            phone: email,
            password: password,
            cnd:1
        })
        .then(res => console.log(res))
        .catch(err => console.log(err))

    }

    return (
        <form className='login-form' onSubmit={handleSubmit}>
        <div className="form-control">
            <label htmlFor="email">Email</label>
            <input spellcheck="false" onChange={e => setEmail(e.target.value)} type="email" name="email" id="email" />
            <small>amp;nbsp;</small>             
        </div>

        <div className="form-control">
            <label className="password-label" htmlFor="password">Password</label>
            <div className="password-container">
                <input spellcheck="false" onChange={e => setPassword(e.target.value)} type={type ? 'text' : 'password'} className="password" name="password" id="password" />
                <span className="eye"><img onClick={e => setType(!type)} src={type ? eyeOpen : eyeClosed} alt="eye icon" /></span>
            </div>
        </div>

        <button className="submit-btn" >Register</button>
        </form>
    )
}

export default SignUp
  

Прежде всего, создайте новый файл axios и сделайте что-то вроде этого:

 import axios from 'axios';

const url = 'https://yourapi.com/';

const api = axios.create({
  baseURL: url,
});

const revalidateToken = async () => {
  const refreshToken = localStorage.getItem('@Api:refreshToken');
  await axios
    .post(`${url}token`, {
      refreshToken,
    })
    .then((config) => {
      localStorage.setItem('@Api:acessToken', config.data.accessToken);
    })
    .catch((error) => {
      return error;
    });
};

api.interceptors.request.use(async (config) => {
  const token = localStorage.getItem('@Api:acessToken');

  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }

  return config;
});

api.interceptors.response.use(
  async (config) => {
    return config;
  },
  async (error) => {
    if (error.response.status === 401) {
      await revalidateToken();
    }
    return Promise.reject(error);
  },
);

export default api;