Can someone help me what i've been missing? When i'm trying to login if the credentials are correct it should redirect to profile page, if not it should show the response message from the server server response message screenshot below the login button like Invalid Password ! instead its redirecting to profile page and this error shows up Error Screenshot if the login credentials are wrong it should display error message below the login button and if the login is successful it should redirect to profile page.
auth.service.js
const login = (username, password) => { return axios .post(API_URL + "signin", { username, password, }) .then((response) => { if (response.data && response.data.data && response.data.data.token) { localStorage.setItem("user", JSON.stringify(response.data)); } return response.data; }) .catch((err) => { console.log("An error occured: ", err); }); }; const logout = () => { localStorage.removeItem("user"); }; auth.js
import { REGISTER_SUCCESS, REGISTER_FAIL, LOGIN_SUCCESS, LOGIN_FAIL, LOGOUT, SET_MESSAGE, } from "./types"; import AuthService from "../services/auth.service"; export const register = (username, email, password) => (dispatch) => { return AuthService.register(username, email, password).then( (response) => { dispatch({ type: REGISTER_SUCCESS, }); dispatch({ type: SET_MESSAGE, payload: response.data.message, }); return Promise.resolve(); }, (error) => { const message = (error.response && error.response.data && error.response.data.message) || error.message || error.toString(); dispatch({ type: REGISTER_FAIL, }); dispatch({ type: SET_MESSAGE, payload: message, }); return Promise.reject(); } ); }; export const login = (username, password) => (dispatch) => { return AuthService.login(username, password).then( (data) => { dispatch({ type: LOGIN_SUCCESS, payload: { user: data }, }); return Promise.resolve(); }, (error) => { const message = (error.response && error.response.data && error.response.data.message) || error.message || error.toString(); dispatch({ type: LOGIN_FAIL, }); dispatch({ type: SET_MESSAGE, payload: message, }); return Promise.reject(); } ); }; export const logout = () => (dispatch) => { AuthService.logout(); dispatch({ type: LOGOUT, }); }; Login.js
import React, { useState, useRef } from "react"; import { useDispatch, useSelector } from "react-redux"; import { Redirect } from 'react-router-dom'; import Form from "react-validation/build/form"; import Input from "react-validation/build/input"; import CheckButton from "react-validation/build/button"; import { login } from "../actions/auth"; const required = (value) => { if (!value) { return ( <div className="alert alert-danger" role="alert"> This field is required! </div> ); } }; const Login = (props) => { const form = useRef(); const checkBtn = useRef(); const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [loading, setLoading] = useState(false); const { isLoggedIn } = useSelector(state => state.auth); const { message } = useSelector(state => state.message); const dispatch = useDispatch(); const onChangeUsername = (e) => { const username = e.target.value; setUsername(username); }; const onChangePassword = (e) => { const password = e.target.value; setPassword(password); }; const handleLogin = (e) => { e.preventDefault(); setLoading(true); form.current.validateAll(); if (checkBtn.current.context._errors.length === 0) { dispatch(login(username, password)) .then(() => { // props.history.push("/home"); // window.location.reload(); }) .catch(() => { setLoading(false); }); } else { setLoading(false); } }; if (isLoggedIn) { return <Redirect to="/profile" />; } return ( <div className="col-md-12"> <div className="card card-container"> <img src="//ssl.gstatic.com/accounts/ui/avatar_2x.png" alt="profile-img" className="profile-img-card" /> <Form onSubmit={handleLogin} ref={form}> <div className="form-group"> <label htmlFor="username">Username</label> <Input type="email" className="form-control" name="email" value={username} onChange={onChangeUsername} validations={[required]} /> </div> <div className="form-group"> <label htmlFor="password">Password</label> <Input type="password" className="form-control" name="password" value={password} onChange={onChangePassword} validations={[required]} /> </div> <div className="form-group"> <button className="btn btn-primary btn-block" disabled={loading}> {loading && ( <span className="spinner-border spinner-border-sm"></span> )} <span>Login</span> </button> </div> {message && ( <div className="form-group"> <div className="alert alert-danger" role="alert"> {message} </div> </div> )} <CheckButton style= ref={checkBtn} /> </Form> </div> </div> ); }; export default Login; Profile.js
import React from "react"; import { Redirect } from 'react-router-dom'; import { useSelector } from "react-redux"; const Profile = () => { const { user: currentUser } = useSelector((state) => state.auth); if (!currentUser) { return <Redirect to="/login" />; } return ( <div className="container"> <header className="jumbotron"> <h3> <strong>{currentUser.data.userInfo.name}'s</strong> Profile </h3> </header> <p> <strong>Id:</strong> {currentUser.data.userInfo.userId} </p> <p> <strong>Token:</strong> {currentUser.data.token} </p> <p> <strong>Email:</strong> {currentUser.data.userInfo.email} </p> <p> <strong>Name:</strong> {currentUser.data.userInfo.name} </p> </div> ); }; export default Profile; 
没有评论:
发表评论