Xử lý xác thực người dùng thông qua Redux và Redux Router

Question

Tôi đã tự hỏi mọi người thường xử lý Xác thực người dùng bằng redux như thế nào? Tôi đang sử dụng Redux Router và tôi có một API đường dẫn phụ trợ xử lý xác thực người dùng thông qua một mã thông báo xác thực.

Khi người dùng gửi biểu mẫu đăng nhập, api sẽ trả về mã thông báo xác thực để sử dụng cho các yêu cầu tiếp theo. Ban đầu tôi chỉ lưu trữ mã thông báo auth trong cây trạng thái đơn và mỗi lần tôi gửi một hành động cần thực hiện yêu cầu API yêu cầu xác thực người dùng, tôi sử dụng (dispatch, getState) để tìm nạp mã thông báo xác thực đó và sau đó đưa nó vào API yêu cầu. Vì vậy: getState(). CurrentUser.auth_token.

Tôi không chắc liệu tôi có đang tiếp cận điều này một cách đúng đắn hay không. Do một số người sử dụng localStorage với Redux để xác thực người dùng để mô phỏng như phiên phía máy chủ? Sau đó, mỗi lần yêu cầu API được thực hiện, tôi chỉ cần kiểm tra bộ nhớ cục bộ cho mã thông báo xác thực và nếu người dùng đó có đăng nhập không?

Điều tôi đã kết thúc là sử dụng cookie js và đã thực hiện Cookie.set khi người dùng xác thực. Thành phần gốc của tôi <App /> sau đó có một componentDidMount gửi một hành động initAuth() để kiểm tra Cookie hiện tại để xem liệu nó có còn hợp lệ hay không. Nếu như vậy nó giữ cho người dùng đã đăng nhập bằng cách khác, nó sẽ đặt lại trình giảm xác thực thành defaultState của nó.

Dưới đây là liên kết để repo với xác thực người dùng: https://github.com/SpencerCDixon/Kira/blob/master/client/actions/AuthActions.js

Bất cứ lời khuyên hoặc tài nguyên sẽ được nhiều đánh giá cao. Tôi đã xem ví dụ thế giới thực và ví dụ auth Router cho đến nay. Ví dụ về React Router dường như sử dụng localStorage, đó là lý do tại sao tôi tò mò nếu đó là con đường phù hợp để thực hiện. Tôi nhận thấy cũng có một gói nux Redux Localstorage.

Rất muốn biết nếu tôi vô tình mở bản thân mình lên một số loại tấn công xác thực hoặc nếu có cách nào tốt hơn để tiếp cận luồng này!

Answer 1

Tôi đã tự hỏi mọi người thường xử lý Xác thực người dùng bằng Redux như thế nào?

Tôi đã ở trong tình huống đó trong rất nhiều dự án và kết thúc bằng giải pháp không làm tôi đổ mồ hôi mỗi khi tôi cần xử lý xác thực trong các ứng dụng React/Redux của mình.

Trong các dự án của tôi, tôi đang sử dụng Node.js nhưng điều này không thay đổi bất cứ điều gì, bạn có thể sử dụng bất kỳ công nghệ phía máy chủ nào.

Giải pháp

tôi nhận thấy rằng trong một ứng dụng trang duy nhất (SPA), cơ chế xác thực được xử lý trên client-side, như bạn nói, kiểm tra nếu người dùng có một mã thông báo, chứng thực nó với máy chủ và sau đó 'chuyển hướng' đến một cơ sở tuyến đường có liên quan trên đó, bây giờ nó không phải là vấn đề cho dù bạn đang sử dụng React/Redux, Góc, Ember hoặc Backbone cho SPA của bạn, nó sẽ luôn luôn nhận được khó chịu. Vì vậy, tôi đã tách quy trình Xác thực (đăng ký/đăng nhập) khỏi ứng dụng chính, vì vậy khi người dùng khởi chạy ứng dụng của tôi lần đầu tiên, máy chủ sẽ kiểm tra cookie token, Nếu người dùng có cookie đó với yêu cầu, máy chủ xác nhận mã thông báo này và nếu nó hợp lệ, chuyển hướng máy khách đến trang ứng dụng chính (ví dụ index.html), nếu mã thông báo không hợp lệ hoặc không tồn tại, máy chủ sẽ chuyển hướng máy khách đến thông tin đăng nhập/trang đăng ký (login.html/signup.html).

Trang login.html không phải là một phần của ứng dụng chính người dùng cố gắng đăng nhập, máy chủ đã xác thực tên người dùng và mật khẩu từ trang login.html đó và nếu đó là thông tin xác thực hợp lệ, máy chủ sau đó đặt một cookie token cho người dùng đó và chuyển hướng anh ấy đến trang ứng dụng chính (index.html) mã ứng dụng có thể được nạp mà không cần phải xử lý xác thực vì nếu người dùng có thể tải trang này (index.html) có nghĩa là anh ta phải có một mã thông báo hợp lệ.

Answer 2

tôi vừa hoàn thành công việc về dự án nguồn mở auth redux. Tôi đang lưu mã thông báo vào localStorage. cho kết thúc trở lại tôi đang sử dụng nút, nhưng tôi đoán bạn sẽ nhận được ý tưởng.

https://github.com/DimitriMikadze/node-redux-auth