Giới thiệu

Trong vài ngày qua, tôi đã làm việc trên một dự án nhỏ kết hợp hai công cụ mà tôi muốn cải thiện: FastAPI (cho backend) và React (cho frontend). Để giữ mọi thứ thực tiễn, tôi đã xây dựng một ứng dụng Todo đơn giản cho phép người dùng đăng ký, đăng nhập và quản lý todos của họ một cách an toàn.

Mặc dù đây không phải là một dự án "sẵn sàng cho sản xuất", nhưng nó là một dự án học tập. Nó bao gồm những điều cốt lõi mà hầu hết các ứng dụng đều cần: xác thực, các tuyến đường được bảo vệ và dữ liệu thuộc về từng người dùng. Tôi không muốn chỉ xây dựng một ứng dụng tĩnh. Xác thực thường là thách thức "thế giới thực" đầu tiên mà mọi lập trình viên gặp phải khi chuyển từ hướng dẫn sang các dự án thực tế. Bằng cách tạo một ứng dụng Todo có chức năng đăng nhập và đăng ký, tôi đã buộc bản thân phải kết nối các điểm giữa backend và frontend, và đây là một cách thú vị để học.

Công nghệ sử dụng

• Backend: FastAPI, passlib để mã hóa mật khẩu, python-jose cho JWT tokens, SQLAlchemy + PostgreSQL để lưu trữ người dùng và todos.
• Frontend: React (hooks + fetch), với token được lưu trữ trong localStorage cho các yêu cầu đã xác thực.
• Giao tiếp: CORS middleware được kích hoạt trên FastAPI để ứng dụng React có thể giao tiếp với nó mà không gặp lỗi.

Cách thức xác thực hoạt động

1. Khi người dùng đăng ký, mật khẩu của họ được mã hóa bằng bcrypt (không bao giờ lưu trữ dưới dạng văn bản thuần).
2. Khi đăng nhập, FastAPI kiểm tra mật khẩu và, nếu hợp lệ, sẽ trả về một JWT token.
3. React lưu trữ token này trong localStorage.
4. Mỗi cuộc gọi API đến các tuyến đường được bảo vệ (như thêm hoặc xóa todos) đều bao gồm token trong tiêu đề.
5. FastAPI xác minh token trước khi cho phép truy cập.

Chạy dự án cục bộ

Clone repo và mở hai terminal: một cho backend, một cho frontend.

Backend:

cd backend
python -m venv .venv
.venv\Scripts\activate
pip install -r requirements.txt
uvicorn main:app --reload

Frontend:

cd frontend
npm install
npm start

Giờ đây, backend chạy trên localhost:8000 và frontend trên localhost:3000. Hãy đăng ký một người dùng mới, đăng nhập và bắt đầu thêm todos.

Thực tiễn tốt nhất

• Bảo mật thông tin: Luôn mã hóa mật khẩu trước khi lưu trữ và không bao giờ lưu trữ chúng dưới dạng văn bản thuần.
• Quản lý token: Cần có cơ chế làm mới token nếu nó hết hạn để cải thiện trải nghiệm người dùng.
• Kiểm tra lỗi: Đảm bảo rằng tất cả các yêu cầu đều có kiểm tra lỗi để xử lý các tình huống không mong muốn.

Những cạm bẫy phổ biến

• Lưu trữ token không an toàn: Tránh lưu trữ token trong cookie mà không có bảo vệ XSS.
• Thiếu kiểm tra xác thực: Đảm bảo rằng tất cả các tuyến đường được bảo vệ đều kiểm tra token trước khi cho phép truy cập.

Mẹo tối ưu hiệu suất

• Sử dụng caching: Cân nhắc sử dụng bộ nhớ cache để tối ưu hóa thời gian phản hồi cho các yêu cầu thường xuyên.
• Giảm thiểu kích thước payload: Sử dụng nén cho các phản hồi API để giảm thiểu băng thông.

Khắc phục sự cố

• Không thể đăng nhập: Kiểm tra xem mật khẩu có được mã hóa đúng cách không và rằng token được gửi đúng trong tiêu đề.
• Lỗi CORS: Đảm bảo rằng middleware CORS đã được cấu hình chính xác trong FastAPI.

Kết luận

Dự án này nhỏ, nhưng tôi hạnh phúc vì nó hoạt động cục bộ và tôi hiểu từng phần của nó. Nếu bạn có bất kỳ câu hỏi hoặc phản hồi nào, hãy để lại ý kiến của bạn!

Bạn có thể xem mã nguồn đầy đủ tại đây: Todo-App trên GitHub.