我试图把错误的密码和电子邮件,它不发送错误信息,也是其登录,让它进入主页面,所以你能帮我显示错误信息,而我把错误的密码和电子邮件。
我试图把错误的密码和电子邮件,它不发送错误信息,也是其登录,让它进入主页面,所以你能帮我显示错误信息,而我把错误的密码和电子邮件。
import React, { Component } from "react";
import Swal from "sweetalert2";
import Cookies from "universal-cookie";
import head from "../img/head.png";
import login from "../img/login.svg";
export class Login extends Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: "",
submitted: false
};
this.cookies = new Cookies();
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e) {
const name = e.target.name;
const value = e.target.value;
this.setState(prevstate => {
const newState = { ...prevstate };
newState[name] = value;
return newState;
});
}
handleSubmit(event) {
event.preventDefault();
this.setState({ submitted: true });
if (this.state.email && this.state.password) {
this.fetchUserData();
}
}
async fetchUserData() {
Swal.fire({
title: "Logging in Process",
showCancelButton: false,
showConfirmButton: false,
onBeforeOpen: () => {
Swal.showLoading();
}
});
const requestData = {
method: "POST",
body: JSON.stringify({
email: this.state.email,
password: this.state.password
}),
headers: { "Content-Type": "application/json" }
};
const request = await fetch(
"https://tardis-back.herokuapp.com/auth/sign_in",
requestData
);
const response = await request;
this.cookies.set("Access-Token", response.headers.get("Access-Token"));
this.cookies.set("Client", response.headers.get("Client"));
this.cookies.set("Uid", response.headers.get("Uid"));
this.cookies.set("Expiry", response.headers.get("Expiry"));
var error = true;
if (response.success === undefined) {
error = false;
} else {
error = true;
}
if (!error) {
Swal.fire({
title: "Loggedin",
type: "success",
showConfirmButton: false,
timer: 1000
}).then(login => {
if (login.dismiss === Swal.DismissReason.timer) {
window.sessionStorage.setItem("isLoggedIn", true);
window.location.href = "/";
}
});
} else {
Swal.fire({
timer: 1000,
title: "Logging Error",
type: "error",
text: "Your entered Wrong Email or Password"
});
}
}
render() {
return (
<section class="login-block ">
<div class="containe container">
<div class="row">
<div class="col-md-5 id login-sec ">
<img src={head} alt="logo" style={{ height: "60px" }}></img>{" "}
<br></br>
<span className="headd" style={{ fontSize: "13px" }}>
SOFT BIKE
</span>
<h5 className=" text-dark text-left log">LOG IN</h5>
<form class="login-form">
<div class="form-group">
<label
for="exampleInputEmail1"
class=""
style={{
color: "rgba(19, 183, 96, 1.0)",
fontSize: "13px",
opacity: "0.7"
}}
>
Username
</label>
<input
type="text"
class="form-control"
placeholder=""
name="email"
value={this.state.email}
onChange={this.handleChange}
/>
</div>
<div class="form-group">
<label
for="exampleInputPassword1"
class=""
style={{
color: "rgba(19, 183, 96, 1.0)",
fontSize: "13px",
opacity: "0.7"
}}
>
Password
</label>
<input
type="password"
class="form-control"
placeholder=""
name="password"
value={this.state.password}
onChange={this.handleChange}
/>
</div>
<p
style={{
fontSize: "14px",
opacity: "0.6",
fontWeight: "400",
fontFamily: "'Roboto', Helvetica, Arial, serif"
}}
>
Forget Password ?
</p>
<br></br>
<button
type="submit"
value="Login"
onClick={this.handleSubmit}
class="btn btn-login btn-block text-white font-weight-bolder box "
style={{
background: "rgba(19, 183, 96, 1.0)",
padding: "10px",
boxShadow: "0px 8px 25px -7px #c0c0c0",
borderRadius: "4px"
}}
>
START
</button>
</form>
</div>
<div class="col-md-7 banner-sec">
<div
id="carouselExampleIndicators"
class="carousel slide"
data-ride="carousel"
>
<ol class="carousel-indicators">
<li
data-target="#carouselExampleIndicators"
data-slide-to="0"
class="active"
></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img
class="d-block img-fluid"
src={login}
alt="First slide"
/>
<div class="carousel-caption d-none d-md-block">
<div class="banner-text">
<h2>SOFT BIKE</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
);
}
}
export default Login;
字符串
1条答案
按热度按时间ycl3bljg1#
对于错误的电子邮件+ pwd方案,您的API返回401状态代码(如预期)。
但是你处理这个错误的方式在你的代码中是错误的。
根据
fetch
文档-访问页面一个成功的fetch()的准确检查应该包括检查promise是否已解析,然后检查Response.ok属性的值是否为true。
所以,在你的代码中修改这一行-
字符串
像这样的事-
型
你会得到登录错误。
在这里创建了一个活动沙箱来玩-https://codesandbox.io/embed/58116788-handle-fetch-error-uzxvg