Блог

Я пытаюсь реализовать аутентификацию пользователя в Context.js

 import React, {useState} from 'react'
import config from './config/config'
import axios from 'axios'
const Context = React.createContext()

function ContextProvider({children}) {

    const authenticate = async (email, password) => {
        let e = null;
        axios.post(
            `${config.url}/auth/login`,
            JSON.stringify({email, password}),
            { headers: { 'Content-Type': 'application/json' } }
        ).then(function (response) {
            //save token
            //save user
            //redirect to app home
        }).catch( error => {
            e = error
        })
        return e
    }

    return(
        <Context.Provider value={{authenticate}}>
            {children}
        </Context.Provider>
    )
}

export {ContextProvider, Context}
 

а затем вызываете его с помощью useContext Hook в Login.js компонент.

 export default function Login() {
const context = useContext(Context)
const [errors, setErrors] = useState(null)
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")

const loginUser = (e) => {
    e.preventDefault();
    const axiosErrors = context.authenticate(email, password)
    console.log(axiosErrors)
 

Хотя я могу фиксировать ошибки / в блоке catch { console.log (e) } вызова axios, я не могу фиксировать их в Login.js .
Таким образом, приведенный выше console.log записывает на консоль следующее:

 {axiosErrors: Promise}
POST http://localhost:7000/api/auth/login 401 (Unauthorized)