Redux

Question

के साथ उपयोगकर्ता को प्रमाणित करने के लिए प्रवाह क्लाइंट-साइड उपयोगकर्ता प्रमाणीकरण कोड व्यवस्थित करने के लिए Redux तरीका क्या है?

रेडक्स में फेसबुक लॉगिन को सर्वोत्तम रूप से एकीकृत करने का तरीका सीखना भी अच्छा लगेगा।

Answer 1

मैंने फेसबुक के लॉगिन प्रवाह के साथ काम नहीं किया, लेकिन मुझे लगता है कि यह वही विचार होगा।

तो, में लॉग इन करने और डाटा को, बस निम्नलिखित क्षेत्रों के साथ उपयोगकर्ता के लिए अतिरिक्त कम करने बनाएँ:

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

बेशक

, तो आप एक बहुत अधिक क्षेत्रों हो सकता था, आप के रूप में अच्छी तरह से यहाँ जानकारी दर्ज की डाल सकता है (उदाहरण के लिए, isUserRegistering, या विवरण, जो भी हो)।

आपको बस इतना करना है कि - लॉग इन और लॉगआउट तरह के तरीकों बनाने के लिए, जो इस प्रवाह करेंगे। उनमें, लोडिंग, त्रुटि प्रबंधन, और बहुत कुछ जोड़ने के लिए अपने यूआई को अपडेट करने के लिए बस इसी फ़ील्ड को बदलें।

कुछ निम्न कोड की तरह:

// 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 
     }); 
    } 

मैं उल्लेख करना होगा, कि इमारत मिडलवेयर हमेशा टोकन से संलग्न नहीं तो अच्छा विचार हो सकता है, अगर आपके अनुरोधों के अंदर reducers कि क्या वे टोकन के माध्यम से कर रहे हैं फर्क किया जाना है या नहीं - तो, ​​यह आपके द्वारा टोकन जोड़ने के लिए थोड़ा और अधिक लचीला हो सकता है।

Answer 2

मेरे उदाहरण प्रोजेक्ट में, मैंने बस authed रेड्यूसर रखा जो सभी प्रमाणीकृत उपयोगकर्ता डेटा को संभाला। प्रारंभिक अवस्था और कम करने इस तरह दिखता है: उपयोगकर्ता

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 
     }); 

बाद प्रमाणन प्रवाह पूरा करता है, मैं बस authed राज्य में पहुँच टोकन गुण सेट, और प्रयोग है कि सत्यापित करने के लिए यदि कोई उपयोगकर्ता मेरी पूरे एप्लिकेशन में प्रमाणीकृत किया गया है। यानी

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

सफल प्रमाणीकरण के बाद, मैंने एक कुकी भी सेट की। जब उपयोगकर्ता वापस आ जाता है, तो मैंने कुकी से एक्सेस टोकन पढ़ा और परीक्षण किया कि यह अभी भी वैध है (फेसबुक के लिए यह /me एंडपॉइंट के साथ इसका उपयोग कर रहा है)।

यदि उपयोगकर्ता लॉग आउट करता है, तो मैं बस authed स्थिति को initialState पर सेट करता हूं और कुकी को अनसेट करता हूं।

सरल, लेकिन यह मेरे लिए काम करता है। आप यहाँ कोड की जाँच कर सकते हैं:

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

☝ इस फ़ाइल में थोड़ा बालों है, लेकिन सिर्फ initAuth, loginUser, logoutUser, receiveAccessToken, resetAuthed कार्यों की जाँच करें।

डेमो: https://soundredux.io

Answer 3

मैं आम तौर पर एक सत्र कम करने के भीतर प्रमाणन संभाल, और फिर जाँच कुछ खास शर्तें पूरी की है कि क्या के लिए एक authorized मिडलवेयर समारोह को परिभाषित, और यदि नहीं, अनुप्रेषित। इसने अब तक बहुत अच्छी तरह से काम किया है।

संपादित करें, सरल उदाहरण के साथ: साथ https://github.com/andrewngu/sound-redux (एक SoundCloud ग्राहक:

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) 
    } 
    } 
}