Я пытаюсь установить редирект после входа в систему и зарегистрироваться в этом реактивном проекте, а также пытаюсь выяснить, как работать с сессиями. Что касается перенаправления, мне удалось это сделать, но он все время перенаправляет, даже если я ввел неправильный пароль. Для сессий я думал, что должен обработать это с помощью логического выражения. Это первый раз, когда я делаю это, поэтому я не знаю, с чего начать с техподдержкой, которую я использую. Я постараюсь вставить эти части кода, а также мой репозиторий. Это часть реакции:
class Login extends Component {
state = {
redirect: false,
username: "",
password: "",
errors: {},
logged: false,
session: []
};
validate = () => {
const errors = {};
if (this.state.username.trim() === "") {
errors.username = "Username is required";
}
if (this.state.password.trim() === "") {
errors.password = "Password is required";
}
return Object.keys(errors).length === 0 ? null : errors;
};
findUser = () => {
fetch("http://localhost:3001/login/user", {
method: "post",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
username: this.state.username,
password: this.state.password
})
})
.then(response => response.json())
.catch(err => console.log(err))
.then(this.setRedirect());
};
handleLogin = e => {
e.preventDefault();
const errors = this.validate();
this.setState({ errors });
if (errors) return;
this.findUser();
this.setState({ login: true });
this.setState({
session: this.state.username
});
};
setRedirect() {
this.setState({
redirect: true
});
console.log(this.state);
}
renderRedirectAfterLogIn() {
if (this.state.redirect) {
return <Redirect to="/userPage" />;
}
}
render() {
return (
<Form style={{ margin: "50px 0" }}>
{this.renderRedirectAfterLogIn()}
Это мои маршруты:
app.get("/users", queries.getUsers);
app.get("/user/:id", (req, res, next) => {
console.log(req);
queries.findUserByEmail(req.body.email).then(user => {
console.log(user);
});
});
app.post("/login/user", (req, res, next) => {
queries
.findUserByUsername(req.body.username, req.body.password)
.then(user => {
console.log(user);
// if (user.rows.length > 0) {
// console.log("this email is already in use");
// res.status(400).send("this email is already in use");
// } else {
// queries.createUser(req.body, res);
// }
})
.catch(err => {
console.log(err);
res.status(401).send("Something went wrong");
});
});
app.post("/signup/user", (req, res, next) => {
queries
.findUserByEmail(req.body.email)
.then(user => {
if (user.rows.length > 0) {
console.log("this email is already in use");
res.status(400).send("this email is already in use");
} else {
queries.createUser(req.body, res);
}
})
.catch(err => {
console.log(err);
res.status(500).send("Something went wrong");
});
});
И вот запросы, которые я использую для этого.
const findUserByUsername = (username, password) => {
pool
.query("SELECT * FROM users WHERE username = $1", [username])
.then(user => {
const hash = user.rows[0].password;
bcrypt
.compare(password, hash)
.then(results => {
console.log(results, "----results");
if (results) {
console.log("Login success");
return;
}
})
.catch(err => {
console.log(err);
});
})
.catch(err => {
console.log(err);
});
};
const findUserByEmail = email => {
// send just email instead
return pool.query("SELECT * FROM users WHERE email = $1", [email]);
};
const createUser = (request, response) => {
const date_created = new Date();
const { username, email, password } = request;
bcrypt.genSalt(saltRounds, function(err, salt) {
bcrypt.hash(password, salt, function(err, hash) {
pool.query(
`INSERT INTO users (username, email, password, date_created) VALUES ($1, $2, $3, $4 )`,
[username, email, hash, date_created],
(error, results) => {
// console.log("---------->", email);
if (error) {
throw error;
}
}
);
});
});
return response.status(201).send(`User added`);
};