react和laravel中的登录身份验证无法正常工作

Posted 2023-03-15

【中文标题】react和laravel中的登录身份验证无法正常工作

【英文标题】：Login Authentication in react and laravel is not working properly

【发布时间】：2021-08-06 11:53:24

【问题描述】：

对于我的项目，我使用 Laravel 和 React.js。我已经在管理面板中创建了具有所需功能的登录页面。现在我可以登录我的系统了。但问题是，当我尝试使用错误的密码或电子邮件登录时，它会重定向到主页。但是当我尝试使用邮递员时，它可以工作，但当我使用我开发的前端登录时却无法正常工作。

这是我在laraval中使用的登录功能，

function login(Request $req)

    $user= User::where('email',$req->email)->first();
    if(!$user || !Hash::check($req->password,$user->password))
    
        return["error"=>"Email or password is not matched"];
    
    return $user;
 

这是我在 react.js 中使用的登录页面

 import React ,useState,useEffect from 'react';
 import useHistory from 'react-router-dom';
 import Header from './Header';
 function Login()
 
  const [email,setEmail]=useState("");
  const[ password,setPassword]=useState("");
  const history = useHistory();
  useEffect(()=>
    if(localStorage.getItem('user-info'))
    
        history.push("/home")
    
 ,[]) 
 async function login()
 
    console.warn(email,password)
    let item=email,password;
    let result=await fetch("http://localhost:8000/api/login", 
        method:'POST',
        body:JSON.stringify(item),
        headers:
            "Content-Type":"application/json",
            "Accept":'application/json'
        
    );
    result=await result.json();
    localStorage.setItem("user-info",JSON.stringify(result))
    history.push("/")
 
 return(
    <div>
        <Header/>
        <h1>Login Page</h1>
        <div className="col-sm-6 offset-sm-3">
        <input type="text" className="form-control" placeholder="email" onChange= 
         (e)=>setEmail(e.target.value)/><br/>
        <input type="password" className="form-control" placeholder="password" onChange= 
        (e)=>setPassword(e.target.value)/><br/>
        <button onClick=login className="btn btn-primary">Login</button>
        </div>
    </div>
   )
  
 export default Login

我该如何解决这个问题？我想知道，当密码或电子邮件不匹配时，是否有任何代码可以插入到登录页面（react.js）以获取消息？

感谢您的帮助！

【参考方案1】：

因此，一旦 API 调用完成，您必须检查 API 响应，这就是您必须进行检查的地方：

result=await result.json();

收到result 后，检查响应是登录成功还是失败，并在失败时根据该显示通知，成功时将令牌设置在本地存储中，否则不。

例如：

if( result.status === 'status from API' )  // check status here



else

【讨论】：

我能知道确切的编码应该在这个 if 函数中吗？也包括“else”。

【参考方案2】：

如果用户成功登录，您的登录函数需要返回状态码

function login(Request $req)

    $user= User::where('email',$req->email)->first();
    if(!$user || !Hash::check($req->password,$user->password))
    
        return response()->json(["error"=>"Email or password is not matched"],400);;
    
    return response()->json(["user"=> $user],200);;
 

然后在您的反应应用程序中检查来自 api 的响应状态

async function login()
 
    console.warn(email,password)
    let item=email,password;
    let response = await fetch("http://localhost:8000/api/login", 
        method:'POST',
        body:JSON.stringify(item),
        headers:
            "Content-Type":"application/json",
            "Accept":'application/json'
        
    );
    
    if(response.ok)
        result= await result.json();
        localStorage.setItem("user-info",JSON.stringify(result.user))
        history.push("/")
    else
       //error feedback