Xử lý Token hết hạn trong hệ thống web

Tổng quan

Client Component gọi đến Server Backend.
- Gọi đến API login từ client component đến server backend.
- Server trả về lỗi 401, xử lý logout client.
Server Component gọi đến Server Backend.
- Xử lý token hết hạn bằng cách chuyển hướng đến trang logout.
- Không thể xóa Cookie từ server, cần sử dụng redirection.

HTTP Interceptor tại Next Client
- Kiểm tra status 401, gọi API logout nếu lỗi liên quan đến authentication.
- Sử dụng interceptor để kiểm tra và xử lý logout.
- Thêm if để chỉ gọi API logout tại client.
```
if (status === 401 && typeof window !== 'undefined') {
  // Gọi API logout
}
```
Trang Logout
- Tạo một trang logout.tsx.
- Trang xử lý API logout để xóa Cookie và chuyển hướng về trang login.
- Kiểm tra session token từ URL và so sánh với Cookie.
```
// Kiểm tra Token và gọi API logout
if (sessionToken === getCookie('sessionToken')) {
  fetch('/api/logout', { method: 'POST', body: '{}' });
}
``
```
Redirect tại server component đối với trường hợp token hết hạn
- Sử dụng redirect từ next/navigation để chuyển hướng đến trang logout.
```
if (status === 401) {
  redirect(`/logout?sessionToken=${sessionToken}`);
}
```

Decode JSON Web Token (JWT)

import jwt from 'jsonwebtoken';

const decoded = jwt.decode(token);
const { exp } = decoded; // Lấy thời gian hết hạn từ JWT

Logout API
- Xử lý API /api/logout để xóa Cookie và trả về thông báo.
- Thêm logic force logout (khi client yêu cầu).
```
if (force) {
  // Xóa Cookie
  res.setHeader('Set-Cookie', '...');
  res.status(200).json({ message: 'Đã logout' });
}
```

Cài đặt và sử dụng abort controller

const controller = new AbortController();
const signal = controller.signal;

fetch('/api/logout', { signal });
controller.abort(); // Hủy request

Đã xử lý thành công các trường hợp khi Token hết hạn tại Next Client và Next Server.
Sử dụng các kỹ thuật như redirect và abort controller để tối ưu hóa quá trình xử lý logout.