Site icon Bệ Phóng Việt

ReactJS Bài 5: Gọi API để xử lý đăng nhập user

jphopeblog
học reactjs đăng nhập tài khoản
Advertisements

Trong bài này, bạn sẽ học cách dùng axios trong reactjs để giúp người sử dụng đăng nhập. Email và mật khẩu của user sẽ được truyền về server qua API /api/user/login.

Để biết cách làm form login, bạn có thể tham khảo bài trước: ReactJS Bài 4: Login layout và xử lý đăng nhập

Cài đặt axios

Chúng ta sẽ đùng thư viện axios để giúp reactjs form submit email và mật khẩu lên server. Để cài axios, bạn chạy lệnh sau tại thư mục gốc của dự án:

npm i axios

Cập nhật trang login

Như ở bài trước, trang login là reactjs component được chúng ta đặt ở file /src/screens/Login.js. Trước hết chúng ta cần viết hàm xử lý việc submit thông tin lên server.

Trong screen login, bạn thêm các thuộc tính (trong reactjs gọi là trạng thái state) sau:

import { useNavigate } from "react-router-dom";
import { useState } from "react";
import axios from 'axios'; // THÊM IMPORT AXIOS
...

const Login = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [message, setMessage] = useState("");
  const [errorMessage, setErrorMessage] = useState("");
  const navigate = useNavigate();
...

 

Tiếp đó thêm hàm handleSubmit để tiếp nhận thông tin khi user click submit và gửi lên server qua api user/login. Ngay dưới constructor viết hàm sau:

...
const Login = () => {
  const [email, setEmail] = useState("");
  ...

  const handleSubmit = (e) => {
    e.preventDefault();
    const config = {
      headers:{
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      }
    };

    axios.post('http://localhost:5051/api/user/login', { // gọi server - xem mục cuối cùng của bài để biết cách tạo server
      email: email,
      password: password
    }, config)
      .then(response => {
        setMessage("You're logged in");
        navigate('/home'); // điều hướng user sang trang home.
      })
      .catch(error => {
        console.log(error);
        setErrorMessage("Login failed");
      });
  };
...

Trong đoạn code trên, chúng ta sử dụng navigate để điều hướng người sử dụng sang trang Home. Bạn có thể đọc thêm về hàm này tại đây useNavigate.

Cuối cùng trong Login screens, bạn cập nhật code của thẻ <form> để kết nối trường email và password với props vừa khai báo, gọi hàm handleSubmit, và hiện thông điệp thích hợp:

...
  return (
    <SimpleLayout>
      <form onSubmit={handleSubmit}>
        <h3>Please login.</h3>
        {message && <p className="text-success">{message}</p>}
        {errorMessage && <p className="text-error">{errorMessage}</p>}
        <div className="form-group">
          <label htmlFor="email">Email address</label>
          <input type="email" className="form-control"
            id="email" aria-describedby="emailHelp"
            value={email} onChange={(event) => setEmail(event.target.value)}/>
           <small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
         </div>
         <div className="form-group">
           <label htmlFor="password">Password</label>
           <input type="password" className="form-control"
             id="password" value={password} onChange={(event) => setPassword(event.target.value)}/>
         </div>
         <div className='form-group' style={{marginTop: '2vh'}}>
           <button type="submit" className="btn btn-primary">Submit</button>
           &nbsp; <a href="/">Back to Home</a>
         </div>
       </form>
     </SimpleLayout>
  );

Thiết lập backend server cho Web Service API /api/user/login

Bạn có thể dùng Laravel Web Service API đơn giản mà mình đã viết tại đây. Web app này cung cấp /api/user/login để bạn có thể dùng thử. Đọc cách setup web service api app.

 

BÀI TIẾP THEO: ReactJS Bài 6: Dùng table với dữ liệu động

Exit mobile version