joaojosefilho/vuejsOidcClient

🔐 Vue.js + OIDC Client: Xác thực và bảo vệ tuyến đường với IdentityServer4

Mẫu dự án Vue.js kết hợp oidc-client để xác thực người dùng qua IdentityServer4, đồng thời cung cấp cơ chế bảo vệ tuyến đường và gọi API an toàn.

Dự án vuejsOidcClient là một ứng dụng Vue.js sử dụng thư viện oidc-client để thực hiện xác thực người dùng thông qua IdentityServer4. Dự án hướng dẫn cách cấu hình kết nối với nhà cung cấp danh tính (identity provider), gọi API bảo mật và bảo vệ các tuyến đường trong ứng dụng bằng cách kiểm tra vai trò người dùng.

✨ Điểm nổi bật

• Cấu hình UserManager: Sử dụng Oidc.UserManager để quản lý phiên đăng nhập, cấu hình authority, client_id, scope, và tự động g renewal token.
• Tích hợp API an toàn: Sử dụng thư viện axios kết hợp với oidc-client để gửi yêu cầu API đã được xác thực với token truy cập.
• Bảo vệ tuyến đường theo vai trò: Sử dụng router.beforeEach() để kiểm tra quyền truy cập dựa trên vai trò (role) của người dùng trước khi cho phép truy cập vào từng route.
• Hỗ trợ silent renew: Tự động làm mới token ngầm thông qua silent_redirect_uri mà không cần can thiệp của người dùng.
• Cấu trúc rõ ràng: Tách biệt logic xác thực (SecurityService.js), gọi API (ApiService.js) và quản lý tuyến đường (index.js).

💡 Vì sao đáng chú ý

Dự án cung cấp một bản tham khảo thực tế về cách tích hợp xác thực OIDC trong ứng dụng Vue.js, đặc biệt là khi làm việc với IdentityServer4. Thay vì chỉ dừng ở việc đăng nhập, dự án còn minh họa cách bảo vệ từng tuyến đường bằng vai trò người dùng — một nhu cầu phổ biến trong các ứng dụng doanh nghiệp. Đây là lựa chọn tốt nếu bạn đang xây dựng ứng dụng Vue.js cần tích hợp hệ thống xác thực bên ngoài hoặc muốn học cách dùng oidc-client một cách có hệ thống.

---

#VueJS #OIDCClient #IdentityServer4 #OpenSource #TiniX