+2
Đổi router theo IP người dùng trong reactjs hoặc vuejs?
Em đang có 1 cái case là thay đổi language theo địa chỉ người dùng, ví dụ đang ở mỹ hc các nước khác sẽ link đến https:// dosomething[.]com/en Hiện tại em đang set router đơn giản như vậy:
Vậy làm sao để check khi người dùng đang ở một nước khác rồi trỏ router cho đúng được ạ? Mong nhận được cao kiến từ mn ^^
Thêm một bình luận
2 CÂU TRẢ LỜI
+6
Việc xác định IP của người dùng khá phức tạp (ít nhất đối với kiến thức nông cạn của mình), từ việc lấy đc IP, đến việc xác định xem IP đó thuộc quốc gia nào là cả một vấn đề, mà case của bạn có vẻ chỉ là một case phổ biến: hiển thị ngôn ngữ trang web theo ngôn ngữ của user. Nếu vậy chỉ cần xác định ngôn ngữ mà user đặt cho trình duyệt bằng navigator.language là được, cách này cũng hợp lý hơn vì đâu phải user ở quốc gia nào cũng muốn xem content bằng ngôn ngữ của quốc gia đó, vd như mình ở Campuchia nhưng thích lướt web bằng tiếng Japan thì sao 😂
@binchanhkun99 Cách của bác Khang mình thấy là ổn đó, mặc định bạn có thể setup dùng ngôn ngữ trình duyệt đang dùng. Điều này sẽ tạo trải nghiệm tốt hơn cho người dùng thay vì bạn tự đoán vùng rồi tự chọn ngôn ngữ. Cũng giống như các mobile app, ngôn ngữ hiển thị mặc định sẽ là ngôn ngữ đang được dùng trên điện thoại.
Ở lần đầu tải trang, nếu trong cookie không có record về language thì bạn có thể chọn ngôn ngữ mặc định dựa trên navigator.language. Nếu người dùng tự đổi lại ngôn ngữ hiển thị thì bạn sẽ lưu lại setting vào cookie để sử dụng cho các lần tải trang sau.
@huukimit em cũng đang làm tạm vậy thoi bác ạ, nhưng y/c vẫn là check theo ip ý bác 😅
@binchanhkun99 Feedback lại cho cấp trên thôi bác. Bác muốn đổi từ IP sang Region thì bắt buộc phải call API của các bên thứ 3 để biết thôi. Chứ theo mình biết thì không có thư viện nào detect được đâu. Mà chỉ vì ngôn ngữ hiển mà phải request API sẽ làm tăng thời gian render trang, dẫn tới thời gian để end-user nhìn thấy UI của web sẽ tăng lên => không đáng để đánh đổi.
@huukimit vâng cảm ơn lời khuyên của bác
Mình làm system thì có thư viện database file Maxmind geoIP2 location khá tốt - chuyên chặn IP nước ngoài truy cập url nhạy cảm (cái này bung ra cũng là text thôi), bạn import vào redis thì tha hồ mà dùng code với search cho nhanh. NGoài ra còn cách khác là sử dụng nginx hỗ trợ sẵn, bạn add thêm header từ thằng geo2ip, rồi code đọc header để hiển thị ngôn ngữ. Đây là idea của mình, không cần API 3rd truy vùng.
+1
Mình đọc qua cả comment dưới nhận thấy đây là 1 case UX điển hình. bạn có thể thực hiện như sau:
- mặc định chắc sẽ là tiếng eng or ngôn ngữ theo số đông mà web cung cấp
- tiếp theo có thể sử dụng
navigator.languagenhư các bạn đã comment trước - tiếp theo call api. nhiều api free lắm. có thể là https://github.com/ipinfo/node Flow sẽ như sau: khi get đc info từ api mà ngôn ngữ khác với ngôn ngữ đang được dùng thì nên hiện popup -> kiểu bạn có muốn đổi ngôn ngữ sang abc hay khồng -> lúc này sẽ cho user chọn và lưu vào biến đệm. để dùng cho lần sau. Cứ thế khi nào vào mà phát hiện nó lệch thì show popup hỏi
:v phải show popup hỏi à bác @@ em thấy như trang binance là đang ở QG nào nó hiển thị QG ấy luôn ý bác. Nhưng mà cái ipinfo-node là thư viện hay sao bác nhỉ? em thấy nó kiểu npm i về rồi lôi ra để dùng với có cái đoạn nó bảo "The free plan is limited to 50,000 requests per month" tức là nó chỉ cho mình dùng cho 50k request còn sau nó là nó bị vô hiệu hoá... Vậy em sợ code bị lỗi vì em sẽ dùng nó làm điều kiện cho router
@binchanhkun99 nhiều api free lắm. https://ip-api.com/ việc show popup hỏi nên. vì nhỡ kh họ chỉ thích ngôn ngữ đó thì sao. Dùng api geolocation lấy ra quốc giá -> suy ra ngôn ngữ -> nếu nó khác với ngôn ngữ đang show cho user => hỏi có đổi ngôn ngử ko .
@haipq em lại nghĩ đến case nếu trên đth mà ng dùng tắt location thì sẽ ntn bác nhỉ :V
