Next.js bài 2: Thực hiện xác thực người dùng với Next.js và Axios

jphopeblog

3 years ago

Bước 1: Cài đặt Axios

Trước tiên, chúng ta cần cài đặt Axios. Hãy mở terminal và chạy lệnh sau:

npm install axios

Sau khi cài đặt xong, chúng ta có thể sử dụng Axios để gửi các yêu cầu HTTP.

Bước 2: Tạo trang đăng nhập

Tiếp theo, chúng ta sẽ tạo một trang đăng nhập để cho phép người dùng đăng nhập vào hệ thống. Hãy tạo một file mới trong thư mục /pages và đặt tên là login.js. Sau đó, chúng ta sẽ tạo giao diện đăng nhập bằng React.

import { useState } from 'react';
import axios from 'axios';

export default function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (event) => {
    event.preventDefault();

    try {
      const response = await axios.post('/api/authenticate', { email, password });
      console.log(response.data);
    } catch (error) {
      console.log(error);
    }
};

return (
  <div>
    <h1>Đăng nhập</h1>
    <form onSubmit={handleSubmit}>
      <div>
        <label>Email</label>
        <input type="email" value={email} onChange={(event) => setEmail(event.target.value)} />
      </div>
      <div>
        <label>Mật khẩu</label>
        <input type="password" value={password} onChange={(event) => setPassword(event.target.value)} />
      </div>
      <button type="submit">Đăng nhập</button>
    </form>
  </div>
);
}

Trong đoạn code trên, chúng ta đã sử dụng useState hook để lưu trữ state của username và password. Đồng thời, chúng ta cũng sử dụng hook useEffect để lắng nghe sự thay đổi của biến isLoggedIn. Nếu biến này được set thành true, chúng ta sẽ redirect người dùng đến trang dashboard.

Sử dụng Axios

Bây giờ, chúng ta sẽ tạo một component để render ra form đăng nhập, và sử dụng axios để gửi request lên server và xác thực người dùng.

import { useState } from 'react';
import axios from 'axios';

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (event) => {
    event.preventDefault();

    try {
      const response = await axios.post('/api/authenticate', {
        username,
        password,
    });

    const { token } = response.data;

    localStorage.setItem('token', token);
    setIsLoggedIn(true);
  } catch (error) {
    console.log(error);
  }
};

return (
  <form onSubmit={handleSubmit}>
    <div>
      <label htmlFor="username">Username:</label>
      <input
        type="text"
        id="username"
        name="username"
        value={username}
        onChange={(event) => setUsername(event.target.value)}
      />
    </div>
    <div>
      <label htmlFor="password">Password:</label>
      <input
        type="password"
        id="password"
        name="password"
        value={password}
        onChange={(event) => setPassword(event.target.value)}
      />
    </div>
    <button type="submit">Submit</button>
  </form>
  );
};

export default Login;

Trong component Login, chúng ta sử dụng useState để lưu trữ state của username và password. Khi form đăng nhập được submit, chúng ta sử dụng axios để gửi một POST request đến endpoint /api/authenticate với thông tin đăng nhập của người dùng. Nếu request thành công, chúng ta lưu trữ token trả về trong localStorage và set biến isLoggedIn thành true.

Nếu request thất bại, chúng ta sẽ log ra lỗi bằng console.log. Tuy nhiên, trong thực tế, bạn cần xử lý lỗi một cách đầy đủ hơn bằng cách hiển thị một thông báo lỗi cho người dùng.

Đây là cách sử dụng axios để gửi request lên server và xác thực người dùng trong ứng dụng Next.js của bạn. Trong bài viết tiếp theo của loạt bài này, chúng ta sẽ tìm hiểu cách sử dụng Redux với Next.js để quản lý state của ứng dụng.

Bài tiếp theo: Next.js bài 3: Sử dụng Redux với Next.js để quản lý trạng thái ứng dụng

Bước 1: Cài đặt Axios

Bước 2: Tạo trang đăng nhập

Sử dụng Axios

SHARE BÀI VIẾT NÀY