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

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();
...

• Các thuộc tính (state) này sẽ chửa giá trị email và password mà người sử dụng nhập. Thông điệp message và errorMessage cũng sẽ được sử dụng để in ra màn hình.
• useState() là một hook trong ReactJS, được sử dụng để khởi tạo một state trong component. Nó trả về một mảng gồm 2 phần tử, phần tử đầu tiên là giá trị hiện tại của state, phần tử thứ hai là một function để cập nhật giá trị của state.
• Bạn sẽ thấy cách khai báo ngắn gọn const [email, setEmail] = useState("") có nghĩa là khai bao biến email; và hàm setEmail có thể dùng để thay đổi giá trị của email. Bạn không được phép gán email = "...." mà phải gọi hàng setEmail("email...")để thực hiện việc này. Giá trị khởi tạo của email là "" (rỗng)

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>
  );

• Khi người dùng nhập email và mật khẩu vào form và nhấn nút submit, sự kiện submit onSubmit sẽ được gọi. Sự kiện này sẽ gọi hàm handleSubmit mà chúng ta đã viết ở trên.
• Trong hàm handleSubmit, nếu đăng nhập thành công, trạng thái message sẽ được thiết lập thành “You’re logged in”, ngược lại trạng thái errorMessage sẽ được thiết lập thành “Login failed”.

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