Universal Auth Redux & React Router

Question

Tôi đang gặp một số sự cố với xác thực với redux và phản ứng bộ định tuyến và tôi hy vọng một số làm rõ về cách giải quyết tốt nhất vấn đề của tôi.

Tôi có một thành phần đăng nhập mà khi gửi công văn hành động sau đây:

export const loginUser = (creds) => { 
    return dispatch => { 

    dispatch(requestLogin(creds)) 

    return fetch('http://127.0.0.1:4000/api/login', { 
     ... 
    }) 
     .then(res => { 
     dispatch(receiveLogin()) 
     browserHistory.push('/admin') 
     ... 
     }) 
     ... 
    } 
} 

Hành động receiveLogin cập nhật cờ isAuthenticated trong tiểu bang là true. Tuyến đường được bảo vệ của tôi có các móc sau vào nút Nhập:

export default (state) => { 
    return { 
    path: '/', 
    component: App, 
    childRoutes: [ 
     { 
     path: 'protected', 
     component: Protected, 
     ... 
     onEnter(nextState, replaceState) { 
      const loggedIn = //check state.isAuthenticated 
      if (!loggedIn) { 
      replaceState(null, 'login') 
      } 
     } 
     } 
    ] 
    } 
} 

Như bạn thấy, tôi chuyển trạng thái này làm đối số. Điều này cho phép tôi truy cập trạng thái ban đầu từ máy chủ cũng như trên máy khách. Tuy nhiên, sau khi hành động đăng nhập của tôi xảy ra, rõ ràng móc onEnter vẫn sẽ sử dụng trạng thái ban đầu.

Điều tôi muốn biết là cách tốt nhất để có được trạng thái hiện tại sau khi cờ isAuthenticated được cập nhật và sử dụng nó trong móc onEnter của tôi thay thế. Hoặc, là cách tiếp cận của tôi hoàn toàn sai lầm và tôi nên làm điều này một cách hoàn toàn khác nhau?

Answer 1

Tôi thấy rằng việc sử dụng móc nối onEnter không phải là cách tiếp cận tốt nhất trong các ứng dụng của tôi để xử lý loại logic auth này và kết nối với một kho lưu trữ redux. Một trong những (một số) cạm bẫy ở đây là ngay cả khi bạn có thể đăng nhập người dùng vào tuyến đường 'được bảo vệ' của bạn, nếu họ đăng xuất trong khi 'được bảo vệ', họ sẽ không bao giờ được chuyển hướng đến 'đăng nhập' bởi vì nó sẽ không kích hoạt onEnter.

Cách tiếp cận khác là sử dụng Cấu phần đặt hàng cao hơn, xem post của Dan Abramov về cách sử dụng chúng trên mixin và tôi thấy chúng thực sự hữu ích trong ngữ cảnh này. Đã có một vài gist/ví dụ repos ra khỏi đó làm thế nào để sử dụng chúng, nhưng gần đây tôi đã tạo ra một thư viện redux-auth-wrapper đặc biệt cho mục đích này. Nó khá mới nhưng tôi nghĩ rằng nó có thể hữu ích và tránh một số mối nguy hiểm khi sử dụng không chính xác của HOC cho auth mà có thể dẫn đến infinite-loop-redirects.

Ý tưởng sử dụng HOC là nó là một hàm khi áp dụng cho một thành phần mở rộng chức năng của nó theo một cách nào đó. Người dùng redux có nhiều khả năng quen thuộc với connect để tăng cường Thành phần với đăng ký cho cửa hàng.

Trong trường hợp này, Thành phần bạn viết không biết được bảo vệ bởi xác thực/ủy quyền và khi áp dụng hàm HOC, một thành phần mới với các kiểm tra đã cho sẽ được trả về. Nếu những người vượt qua, các thành phần bọc được trả lại, người dùng khác được chuyển hướng đến một nơi để đăng nhập (hoặc ở một nơi khác nếu nó là một vấn đề ủy quyền). HOC sử dụng các phương pháp vòng đời componentWillMount và componentWillReceiveProps để xác định thời tiết hay không người dùng được phép xem thành phần đã cho. Điều này cho phép hỗ trợ chuyển hướng ra khỏi các thành phần trên thay đổi xác thực ngay cả khi tuyến đường không.

Tôi cũng sẽ xem các ví dụ về chiến lược tương tự tại đây: https://github.com/joshgeller/react-redux-jwt-auth-example.

Và đây là một ví dụ sử dụng onEnter cho auth với một số thủ thuật lưu trữ, nhưng tôi tin rằng nó sẽ không xử lý trường hợp cạnh được mô tả ở trên: https://github.com/CrocoDillon/universal-react-redux-boilerplate/blob/master/src/routes.jsx.