Luồng để xác thực người dùng bằng Redux

Question

Cách Redux để tổ chức mã xác thực người dùng phía máy khách là gì?

Cũng muốn tìm hiểu cách tích hợp tốt nhất đăng nhập Facebook vào Redux.

Answer 1

Tôi không làm việc với luồng đăng nhập của Facebook, nhưng tôi nghĩ rằng đó sẽ là ý tưởng tương tự.

Vì vậy, để đăng nhập và lưu trữ dữ liệu, chỉ cần tạo thêm giảm cho người sử dụng với các lĩnh vực sau:

{ 
    access_token: null, 
    isLogin: false, 
    isProcessingLogin: true, 
    profile: {} 
} 

Tất nhiên, bạn có thể có rất nhiều lĩnh vực, bạn có thể đặt đăng ký thông tin ở đây cũng như (ví dụ: isUserRegistering hoặc chi tiết, bất kỳ điều gì).

Tất cả những gì bạn phải làm - tạo các phương pháp như đăng nhập và logOut, sẽ thực hiện quy trình này. Trong đó, chỉ cần thay đổi các trường tương ứng để cập nhật giao diện người dùng của bạn để thêm tải, xử lý lỗi, v.v.

Something như đoạn mã sau:

// action creator 
    const logIn = (params) => { 
     return dispatch => { 
     dispatch({ type: 'PROCESSING_LOGIN' }); 
     makeAPICall(params) 
      .then(
       res => dispatch({ type: 'SUCCESS_LOGIN', payload: res }), 
       err => dispatch({ type: 'FAIL_LOGIN', payload: err }) 
      ); 
     }; 
    }; 

    // reducer 
    ['PROCESSING_LOGIN'](state) => { 
     return Object.assign({}, state, { 
      isProcessingLogin: true 
     }); 
    }, 
    [SUCCESS_LOGIN](state, action) => { 
     return Object.assign({}, state, { 
      isLogin: true, 
      isProcessingLogin: false, 
      access_token: action.payload.meta.access_token 
     }); 
    } 

tôi phải đề cập đến, đó là trung xây dựng luôn gắn thẻ có thể là ý tưởng không tốt như vậy, nếu yêu cầu của bạn phải được phân biệt gia giảm bên trong cho dù họ đang có dấu hiệu hoặc không - vì vậy, có thể linh hoạt hơn một chút để tự thêm mã thông báo.

Answer 2

Trong dự án ví dụ của tôi, tôi chỉ cần giữ một bộ giảm tốc authed xử lý tất cả dữ liệu người dùng được xác thực. Tình trạng ban đầu và giảm trông như thế này:

const initialState = { 
    accessToken: null, 
    followings: {}, 
    likes: {}, 
    playlists: [], 
    user: null 
}; 

export default function authed(state = initialState, action) { 
    switch(action.type) { 
    case types.RECEIVE_ACCESS_TOKEN: 
     return Object.assign({}, state, { 
      accessToken: action.accessToken 
     }); 

Sau khi người dùng hoàn thành dòng chảy auth, tôi chỉ đơn giản là thiết lập quyền truy cập tài sản thẻ trong tình trạng authed, và sử dụng để xác minh xem người dùng được xác thực trong suốt ứng dụng của tôi. tức là

if (authed.accessToken) { 
    // display or do something different for logged in user 
} 

Sau khi xác thực thành công, tôi cũng đặt cookie. Khi người dùng quay trở lại, tôi đọc mã thông báo truy cập từ cookie và kiểm tra xem nó có còn hiệu lực không (đối với Facebook nó có thể đang sử dụng nó với điểm cuối /me).

Nếu người dùng đăng xuất, tôi chỉ cần đặt trạng thái authed quay lại initialState và hủy đặt cookie.

Đơn giản, nhưng nó phù hợp với tôi. Bạn có thể kiểm tra mã ở đây:

https://github.com/andrewngu/sound-redux/blob/master/scripts/reducers/authed.js https://github.com/andrewngu/sound-redux/blob/master/scripts/actions/authed.js

☝ Tập tin này là một chút lông, nhưng chỉ cần kiểm tra initAuth, loginUser, logoutUser, receiveAccessToken, resetAuthed chức năng.

Demo: https://soundredux.io

Answer 3

tôi thường xử lý auth trong vòng một giảm phiên, và sau đó xác định một chức năng authorized middleware cho việc kiểm tra điều kiện nhất định đã được đáp ứng, và nếu không, chuyển hướng. Nó hoạt động khá tốt cho đến nay.

Edit, với ví dụ đơn giản:

export default function authorized(store) { 
    return (next) => { 
    return (action) => { 
     const { session: { loggedIn }} = store.getState() 

     if (!loggedIn) { 
     const session = cookie.load(sessionCookie.name) 

     if (session) { 
     next(restoreSession(session, activeBrand)) 

     // Not logged in, redirect. 
     } else { 
     next(replaceState({}, '/login')) 
     } 
    } 

    return next(action) 
    } 
    } 
}