Chức năng đăng nhập trong React sử dụng JWT. Để xử lý đăng nhập sử dụng JSON Web Tokens (JWT) trong ReactJS, bạn cần thực hiện các bước sau:

Bước 1: Cài đặt thư viện jsonwebtoken

Bạn cần cài đặt thư viện jsonwebtoken để tạo và xác minh JWT. Bạn có thể cài đặt nó bằng lệnh sau:

npm install jsonwebtoken

Hosting Hawk Host có tốt không?

Cách đăng ký tài khoản ChatGPT tại Việt Nam chính chủ giá chưa tới 1 USD

Làm việc với nhiều bảng tính Worksheet trong Excel

Bước 2: Tạo API để xác minh thông tin đăng nhập

Bạn cần tạo một API để xác minh thông tin đăng nhập của người dùng và trả về JWT nếu thông tin đúng. Bạn có thể sử dụng bất kỳ thư viện nào để tạo API như ExpressJS, KoaJS, hoặc Fastify.

Ví dụ, nếu bạn sử dụng ExpressJS, bạn có thể tạo API như sau:

const express = require('express');
const jwt = require('jsonwebtoken');

const app = express();

app.post('/login', (req, res) => {

     const { username, password } = req.body;

     // Kiểm tra thông tin đăng nhập
     if (username === 'admin' && password === '123456') {
           // Nếu thông tin đúng, tạo JWT
           const token = jwt.sign({ username }, process.env.JWT_SECRET);

           // Trả về JWT
           res.json({ token });
     } else {
           // Nếu thông tin sai, trả về lỗi
           res.status(401).json({ error: 'Invalid username or password' });
     }
});

app.listen(3000, () => {
            console.log('Server is running on port 3000');
});

Bước 3: Xử lý đăng nhập trong ReactJS

Trong ReactJS, bạn có thể sử dụng thư viện axios để gửi yêu cầu HTTP đến API và lưu trữ JWT vào localStorage. Ví dụ:

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

function Login() {

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

          const handleSubmit = async (e) => {
                    e.preventDefault();
                    try {
                              // Gửi yêu cầu đăng nhập đến API
                              const response = await axios.post('/login', { username, password });

                              // Lưu trữ JWT vào localStorage
                              localStorage.setItem('token', response.data.token);

                              // Chuyển hướng đến trang quản lý
                              window.location.href = '/dashboard';
                     } catch (error) {
                              console.error(error);
                     }
          };

          return ( 

                    <form onSubmit={handleSubmit}>
                             <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
                             <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
                             <button type="submit">Login</button>
                   </form>

           );
}

Bước 4: Kiểm tra JWT trong các yêu cầu API sau này

Sau khi đăng nhập thành công, bạn có thể sử dụng JWT để xác minh danh tính của người dùng.

Hy vọng bài viết Cách code đăng nhập với JWT trong Reactjs sẽ hữu ích với bạn. Nếu bạn có nhu cầu sử dụng Hosting, hãy tham khảo Khuyến mại Hawk Host, mã giảm giá Coupon Hosting Hawk Host trọn đời nhé. Chúc bạn thành công!