Блог

Я пытаюсь аутентифицировать пользователя. Я использую контекстный api для управления своими состояниями. Я хочу использовать аутентификацию для указания защищенных маршрутов, для этого я использую ComposedComponent. Но проблема, с которой я сталкиваюсь, заключается в том, что при монтировании моего компонента я не получаю обновленное состояние из своего контекста в функции componentDidMount. См.Коды ниже.

AuthContext.js

 import React, {createContext, Component} from 'react';
//import {AuthReducer} from './AuthReducer';
import axios from 'axios';



export const AuthContext = createContext()


class AuthContextProvider extends Component {
    state = {
        userDetails: null
    }

    authUser = async () => {
        console.log('Entered!')
        let res = await axios.get('/api/users/auth')
        this.setState({userDetails: res.data}, () => {
            console.log(this.state)
        })
    }
    

    render(){
        console.log(this.state, 'once component is rendered!')
        return (
            <AuthContext.Provider value ={{...this.state, authUser: this.authUser}}>
                {this.props.children}
            </AuthContext.Provider>
        )
    }
}

export default AuthContextProvider
 

См. Код составного компонента

 import React, { Component } from "react";
import { CircularProgress } from "@material-ui/core";
import { AuthContext } from "../../context/Auth/AuthContext";
//import { authUser } from "../../context/Auth/AuthActions";
//import axios from "axios";
//import { USER_SERVER } from "../../utils/misc";


//eslint-disable-next-line
export default function (ComposedClass, routeType) {
  class AuthenticationCheck extends Component {
    state = {
      loading: true,
    };
    static contextType = AuthContext;

     componentDidMount() {
      //  console.log('Component has mounted')
       let { userDetails, authUser } = this.context;
       console.log(userDetails)
       authUser()
       console.log(userDetails)// This still return null after executing authUser function.
      // if (!userDetails.isAuth) {
      //   if (routeType) {
      //     this.props.history.push("/login");
      //   }
      // } else {
      //   if (!routeType) {
      //     console.log(userDetails)
      //     this.props.history.push('/');
      //   }
      // }
      // this.setState({loading: false})
    }
    
    render() {
      const { userDetails} = this.context;
      console.log(userDetails);
      if (this.state.loading) {
        return (
          <div style={{ textAlign: "center", marginTop: "100px" }}>
            <CircularProgress style={{ color: "#2196F3" }} thickness={7} />
          </div>
        );
      }
      return (
        <div>
          <ComposedClass {...this.props} userDetails={userDetails} />
        </div>
      );
    }
  }

  return AuthenticationCheck;
}
 

See my routes code

 import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Layout from './hoc/Layout'
import Home from './pages/home/Home'
import Profile from './pages/profile/Profile'
import Login from './pages/login/Login'
import Register from './pages/register/Register'
import Auth from './hoc/Auth/Auth'



const Routes = () => {
  return(
    <Layout>
      <Switch>
      <Route path="/" exact component={Auth(Home, true)}/>
      <Route path="/profile/:username" exact component={Auth(Profile, true)}/>
      <Route path="/login" exact component={Auth(Login, false)}/>
      <Route path="/register" exact component={Auth(Register, false)}/>
      </Switch>
    </Layout>

  )
}

export default Routes;
 

Any help will be appreciated.