Not authorized form?

Send a request axios.post endpoint data email, login , comes the response from the server 200 resultCode = 0 (i.e. all super you are logged in) check if resultCode === 0, request method axois.get to the auth endpoint/me comes the answer resultCode : 1 , messages['You are not authorized'] hell if I just got the server responded with axios.post all super.... I attach the code... thanks for the answers!

use the library redux-form, so the data is email, login are required according to API send formData through method

API = https://social-network.samuraijs.com/docs (branch /auth)

in the main component App.js implemented the connect method and created dispatch , if you need to throw in comments... for writing that does not fit here

code Login.jsx

import React from "react";
import { NavLink, BrowserRouter, Route } from "react-router-dom";
import * as from axios "axios";
import from ava "../assets/Din.jpg";
classTags import from "./Login.module.css";
LoginReduxForm import from "./LoginForm";

class Login extends React.Component {
 componentDidMount() {
axios
 .get(`https://social-network.samuraijs.com/api/1.0/auth/me`, {
 withCredentials: true,
})
 .then((response) => {
debugger;
 if (response.data.resultCode === 0) {
 this.props.auth(response.data.data, true);
}
});
}
 sendLoginPhoto() {
axios
.get(
 `https://social-network.samuraijs.com/api/1.0/profile/` + this.props.id
)
 .then((response) => {
this.props.loginPhoto(response.data.photos.small);
});
}

 render() {
 const onSubmit = (formData) => {
console.log(formData);
axios
 .post(`https://social-network.samuraijs.com/api/1.0/auth/login`, {
 email: formData.login
 password: formData.password
})
 .then((response) => {
debugger;
console.log(response);
 if (response.data.resultCode === 0) {
axios
 .get(`https://social-network.samuraijs.com/api/1.0/auth/me`, {
 withCredentials: true,
 headers: {
 "API-KEY": "8d9bd45d-58a9-43ac-8b78-2c71c9e79611",
},
})
 .then((response) => {
debugger;
 if (response.data.resultCode === 0) {
 this.props.auth(response.data.data, true);
}
});
}
 return null;
});
};
debugger;

 return (
<BrowserRouter>
 <div className={classTags.disp}>
 <NavLink to="/Login">
 {!this.props.login ? "Login" : this.props.login}
</NavLink>
 {this.props.login ? (
 <button onClick={() => this.sendLoginPhoto()}>Get photo</button>
 ) : null}

 {this.props.login ? (
<img
className={classTags.defaultImg}
 src={!this.props.photo ? ava : this.props.photo}
alt="avatar"
/>
 ) : null}
 {this.props.login ? (
<form>
 {" "}
 <button>{this.props.isAuth ? "Log out" : ""}</button>
</form>
 ) : null}
the <div>
 {!this.props.isAuth ? (
<Route
path="/Login"
 render={() => (
<LoginReduxForm
auth={this.props.auth}
login={this.props.login}
isAuth={this.props.isAuth}
id={this.props.id}
photo={this.props.photo}
loginPhoto={this.props.loginPhoto}
onSubmit={onSubmit}
/>
)}
/>
 ) : null}
</div>
</div>
</BrowserRouter>
);
}
}

export default Login;


code LoginForm.jsx

import React from "react";
classTags import from "./LoginForm.module.css";
import { reduxForm, Field } from "redux-form";

const LoginForm = (props) => {
 const { handleSubmit } = props;
 return (
 <div className={classTags.align}>
 <form onSubmit={handleSubmit} className={classTags.block} action="">
the <div>
<Field
name={"login"}
component={"input"}
 placeholder={"Enter the username"}
/>
</div>
the <div>
<Field
name={"password"}
component={"input"}
 placeholder={"Enter the password"}
type="password"
/>
</div>
the <div>
<Field
name={"rememberMeCheckBox"}
type="checkbox"
component={"input"}
 />{" "}
 remember me
</div>
the <div>
 <button>sign in</button>
</div>
</form>
</div>
);
};

const LoginReduxForm = reduxForm({
 // a unique name for the form
 form: "login",
})(LoginForm);

export default LoginReduxForm;


code reducer auth-reducer.js (sacombank)

let initialState = {
 id: 0,
 email: "",
 login: "",
 isAuth: false,
 isFetching: false,
 photo: "",
};

export const authReducer = (state = initialState, action) => {
 switch (action.type) {
 case "AUTHORIZE":
 return {
...state
 id: action.data.id
 email: action.data.email
 login: action.data.login
 isAuth: action.auth
};
 case "LOGIN_PHOTO":
 return {
...state
 photo: action.photo
};

default:
 return state;
}
};
April 19th 20 at 12:18
0 answer

Find more questions by tags ReactJavaScript