Setup axios – chuyển trang bằng react-router-dom trong interceptor

Tram Ho

Giới thiệu

Bài viết này giải quyết 2 vấn đề

  1. Cách cài đặt axios
  2. Các sử dụng được react-router-dom trong axios interceptor để chuyển trang mà không bị load lại cả website

Nội dung

Cài đặt axios

  • npm:
    npm install axios
  • yarn:
    yarn add axios

Chuyển trang trong interceptor bằng react-router-dom

Vấn đề

Trong reactjs hoặc trong bất kỳ single page app nào chúng ta đều không mong muốn phải re-load toàn bộ trang, việc này làm trình duyệt phải tải lại hết tài nguyên (js, css, image, font,..) làm giảm trải nghiệm người dùng mà lại không tận dụng được sức mạnh của single page app.
Để di chuyển qua lại trong các page chúng ta thường sử dụng hook useHistory/useNavigate của react-router-dom, tuy nhiên interceptor của axios lại không phải là 1 react-component nên không thể sử dụng hook được. Vậy thì phải làm sao đây?

Cách giải quyết

  • Sử dụng cách khác react-router-dom mà cho phép di chuyển trang mà không cần dùng hook
  • Gọi interceptor vào trong react-component để dùng hook
Logic

Tất nhiên trong bài viết này mình sẽ giải quyết theo hướng thứ 2, mindset như sau:

  • Làm sao để set được interceptor trong component?
    • Gọi interceptor ngay App.tsx của project, khỏi tạo 1 lần duy nhất. So ease!
  • Nếu set được rồi thì làm sao những chỗ cần dùng axios sẽ phải sử dụng như thế nào
    • Để những nơi khác ( component, function) có thể dùng được thì cần dùng chung instance với axios interceptor trong App.tsx phía trên

Coding

B1: Gọi interceptor ngay trong component đầu tiên App.tsx

Ở đây mình ví dụ nếu status 401 thì sẽ redirect sang /login

Vậy là xong vấn đề navigate

B2: Làm sao để sử dụng lại được axiosInstance vì mình chỉ custom interceptor của nó thôi, nếu dùng instance khác thì lại chẳng còn navigate nữa, chẳng nhẽ export từ App.tsx ra???

Để đưa về chung 1 instance thì có 2 cách.

  • Cách 1: Sử dụng singleton pattern
  • Cách 2: Sử dụng lại chính instance của thư viện

Ở đây mình sẽ dùng cách 2, còn cách 1 anh em tự tìm hiểu thêm nhé.
Anh em chỉ cần thay axiosInstance bằng axios được import trực tiếp từ thư viện là xong

Vậy là xong, quá đơn giản

B3: Fix bug

Khi đến bước này anh em chạy chắc chắn sẽ báo lỗi vì mình sử dụng useNavigate ở ngoài RouterProvider. Vậy thì chỉ cần đưa đống code này vào trong RouterProvider là được.
Ở đây mình đang dùng react-router-dom 6.8 có thể hơi khác với mọi người. Nhưng mindset là đưa phần setup interceptor vào phía trong RouterProvider để dùng được useNavigate hoặc useHistory

Cách sử dụng

Tổng kết

Vậy là xong, chúc anh em hiểu bài.

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo