Làm cách nào để biết JWT của tôi đã hết hạn?

Sử dụng JWT đã hết hạn sẽ khiến các thao tác không thành công. Như bạn đã thấy ở trên, chúng tôi được cho biết mã thông báo có hiệu lực trong bao lâu cho đến khi

2. Giá trị này thường là 1200 giây hoặc 20 phút. Mã thông báo hết hạn không được làm mới. Chúng tôi chỉ tìm nạp một mã thông báo mới và chuyển mã đó tới Live Experience SDK

Bạn cần tự theo dõi ngày hết hạn JWT. Một cách là đặt bộ hẹn giờ trong ứng dụng của bạn để tìm nạp mã thông báo mới sau 1200 giây. Đây là một bộ đếm thời gian trong Swift.

Timer.scheduledTimer[timeInterval: expires, target: self, selector: #selector[fetchToken], userInfo: nil, repeats: false]

Một cách khác là tính thời gian hết hạn bằng cách thêm 1200 giây vào thời gian hệ thống hiện tại khi mã thông báo được truy xuất. Vì vậy, nếu thời gian bạn lấy mã thông báo là 10. 00 thời gian hết hạn sẽ là 10. 20. Một ví dụ về điều này trong Swift trông giống như.

3

Sau đó, bạn so sánh thời gian hiện tại với thời gian hết hạn để xem mã thông báo đã hết hạn chưa

Hai mươi phút là một khoảng thời gian dài và bạn có thể khởi chạy ứng dụng của mình nhiều lần trong khoảng thời gian đó. Lưu trữ mã thông báo của bạn trong bộ lưu trữ liên tục cho phép mã này tồn tại sau khi thoát ứng dụng. Dưới đây là một ví dụ về lưu trữ mã thông báo và thời gian hết hạn của nó trong bộ lưu trữ liên tục với Swift.

UserDefaults.standard.set[token, forKey: "LXtoken"]
UserDefaults.standard.set[expireTime, forKey: "tokenExpireTime"]

Trong bài trước, chúng tôi đã sử dụng JWT để xác thực dựa trên mã thông báo [đăng ký, đăng nhập, đăng xuất]. Bài viết này tiếp tục hướng dẫn bạn cách xử lý việc hết hạn JWT Token trong React with Hooks

Bài viết liên quan.
– Giới thiệu chuyên sâu về Mã thông báo web JWT-JSON
– Mã thông báo làm mới phản ứng với thiết bị chặn JWT và Axios
– Phản ứng tùy chỉnh . Ví dụ về Xác thực JWT [không có Redux]
– React Hooks: JWT Authentication [without Redux] example
– React Hooks + Redux. Ví dụ về xác thực JWT

Thay vào đó, hãy sử dụng Thành phần React.
Phản ứng – Cách đăng xuất khi Mã thông báo hết hạn [JWT]

nội dung

• Cách kiểm tra khi nào JWT Token hết hạn
• Xử lý hết hạn Mã thông báo JWT với các thay đổi Tuyến đường
  • Reac-router-dom v5
  • Reac-router-dom v6
• Xử lý hết hạn Mã thông báo JWT với trạng thái phản hồi
  • Reac-router-dom v5
  • Reac-router-dom v6
• Phần kết luận
• Đọc thêm
• Mã nguồn

Cách kiểm tra khi nào JWT Token hết hạn

Có hai cách để kiểm tra xem Token đã hết hạn hay chưa

• 1. nhận thời gian hết hạn trong JWT và so sánh với thời gian hiện tại
• 2. đọc trạng thái phản hồi từ máy chủ

Tôi sẽ chỉ cho bạn cách triển khai của cả hai cách.
– Đối với 1, chúng tôi kiểm tra ngày hết hạn của mã thông báo mỗi khi Tuyến thay đổi và gọi phương thức

1 thành phần

0.
– Đối với 2, chúng tôi gửi sự kiện

1 đến thành phần

0 khi trạng thái phản hồi cho chúng tôi biết mã thông báo đã hết hạn.

Chúng tôi sẽ sử dụng cơ sở mã cho các bước tiếp theo. Vì vậy, trước tiên bạn cần đọc một trong các hướng dẫn sau.
– Móc phản ứng. Ví dụ về Xác thực JWT [không có Redux]
– React Hooks + Redux. Ví dụ về xác thực JWT

Mã nguồn Github ở cuối hướng dẫn

Xử lý hết hạn Mã thông báo JWT với các thay đổi Tuyến đường

Chúng ta cần thực hiện 2 bước.
– Tạo một thành phần có

4 đã đăng ký để kiểm tra thời hạn sử dụng của Mã thông báo JWT.
– Kết xuất nó trong thành phần

0.

Reac-router-dom v5

Trong thư mục src, tạo common/AuthVerify. js với đoạn mã sau

________số 8

Bởi vì chúng tôi sử dụng

6, chúng tôi nhập

7 và bọc thành phần bằng HoC. Bây giờ

8 có thể truy cập các thuộc tính và chức năng của đối tượng

9. Sau đó, chúng tôi chuyển một cuộc gọi lại tới

UserDefaults.standard.set[token, forKey: "LXtoken"]
UserDefaults.standard.set[expireTime, forKey: "tokenExpireTime"]

30 để lắng nghe mọi thay đổi của Tuyến đường

Để gọi phương thức

UserDefaults.standard.set[token, forKey: "LXtoken"]
UserDefaults.standard.set[expireTime, forKey: "tokenExpireTime"]

31 của thành phần Ứng dụng gốc từ thành phần

UserDefaults.standard.set[token, forKey: "LXtoken"]
UserDefaults.standard.set[expireTime, forKey: "tokenExpireTime"]

32, chúng ta cần chuyển phương thức

UserDefaults.standard.set[token, forKey: "LXtoken"]
UserDefaults.standard.set[expireTime, forKey: "tokenExpireTime"]

31 làm chỗ dựa

Hãy đặt thành phần

UserDefaults.standard.set[token, forKey: "LXtoken"]
UserDefaults.standard.set[expireTime, forKey: "tokenExpireTime"]

32 thành thành phần

0 như thế này

UserDefaults.standard.set[token, forKey: "LXtoken"]
UserDefaults.standard.set[expireTime, forKey: "tokenExpireTime"]

3

Reac-router-dom v6

Trong thư mục src, tạo common/AuthVerify. js với đoạn mã sau

1

Chúng tôi sử dụng

UserDefaults.standard.set[token, forKey: "LXtoken"]
UserDefaults.standard.set[expireTime, forKey: "tokenExpireTime"]

36 Hook để lắng nghe mọi thay đổi của Tuyến đường

Để gọi phương thức

UserDefaults.standard.set[token, forKey: "LXtoken"]
UserDefaults.standard.set[expireTime, forKey: "tokenExpireTime"]

31 của thành phần Ứng dụng gốc từ thành phần

UserDefaults.standard.set[token, forKey: "LXtoken"]
UserDefaults.standard.set[expireTime, forKey: "tokenExpireTime"]

32, chúng ta cần chuyển phương thức

UserDefaults.standard.set[token, forKey: "LXtoken"]
UserDefaults.standard.set[expireTime, forKey: "tokenExpireTime"]

31 làm chỗ dựa

6

Bạn cũng cần di chuyển

6 sang src/index. js và bọc thành phần

0

9

Xử lý hết hạn Mã thông báo JWT với trạng thái phản hồi

Trước tiên, chúng ta cần thiết lập một hệ thống điều khiển sự kiện toàn cầu hoặc hệ thống PubSub, cho phép chúng ta lắng nghe và gửi các sự kiện từ các thành phần độc lập

Xe buýt sự kiện triển khai mẫu PubSub, các sự kiện sẽ được kích hoạt từ các thành phần khác để chúng không có sự phụ thuộc trực tiếp lẫn nhau

Chúng ta sẽ tạo Event Bus với ba phương thức.

12,

13 và

14

chung/EventBus. js

3

– Phương thức

15 gắn một

16 vào đối tượng

17.

18 sẽ được gọi khi

19 bị sa thải.
– Phương pháp

60 kích hoạt một

19 bằng cách sử dụng API

62.
– Phương thức

63 loại bỏ

19 đính kèm khỏi đối tượng

17.

Tiếp theo, chúng tôi gửi sự kiện

66 trong các thành phần khi nhận được trạng thái phản hồi

67

thành phần/bảng-người dùng. thành phần. js

7

Cuối cùng, chúng ta cần nhập

68 trong thành phần Ứng dụng và lắng nghe sự kiện

66

Reac-router-dom v5

src/Ứng dụng. js

0

Reac-router-dom v6

src/Ứng dụng. js

1

Phần kết luận

Hôm nay chúng ta đã biết 2 cách check check jwt token hết hạn trong React và logout user khi Token hết hạn

Mã thông báo JWT có tự động hết hạn không?

JWT hết hạn được lưu trữ ở đâu?

Làm cách nào để hết hạn mã thông báo JWT hiện tại của tôi?