Redux kullanıcısı kimliği doğrulamak için akış

Question

İstemci tarafı kullanıcı kimlik doğrulama kodunu düzenlemenin Redux yolu nedir?

Ayrıca Facebook girişini Redux'a en iyi şekilde entegre etmeyi öğrenmek isteriz.

Answer 1

Facebook'un giriş akışıyla çalışmadım, ama aynı fikir olacağını düşünüyorum.

Yani, giriş yapmak için ve mağaza bilgileri, sadece aşağıdaki alanları ile kullanıcı için ek düşürücü oluşturmak: Elbette

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

yaptığında (burada da bilgiyi kayıt koyabilirsiniz, çok daha fazla alanlara sahip olabilir Örneğin, ,, veya ayrıntılarıyla, ne olursa olsun.

yapmanız gereken tek şey - Bu akışı yapacak olan Girişi ve Oturumu Kapat gibi yöntemler oluşturun. İçinde, yükleme, hata işleme ve benzeri eklemek için kullanıcı arayüzünüzü güncellemek üzere ilgili alanları değiştirin.

aşağıdaki kodu gibi

şey: senin istekler bunlar belirteç ile olsun iç düşürücüler farklılaştırma lazım eğer

Söz etmek zorunda

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

, her zaman belirteci eklemek o bina katman, o kadar iyi bir fikir olabilir veya değil - yani, kendiniz için belirteci eklemek biraz daha esnek olabilir.

Answer 2

Örnek projemde, tüm kimliği doğrulanmış kullanıcı verilerini işleyen bir authed redükleyiciyi tuttum. başlangıç ​​durumu ve redüktör aşağıdaki gibidir: kullanıcı yetkilendirme akışını tamamlar

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

sonra ben sadece authed devlet erişim belirteci özelliğini ayarlayın ve bir kullanıcı Uygulamamda boyunca doğrulanmış olup olmadığını doğrulamak için kullanabilirsiniz. Ayrıca, başarılı bir kimlik doğrulaması yapıldıktan sonra, bir çerez de ayarladım. Kullanıcı geri döndüğünde, çerezden erişim belirtecini okudum ve hala geçerli olup olmadığını test ediyorum (Facebook için /me son nokta ile kullanıyor olabilir).

Kullanıcı oturumu kapatırsa, authed durumunu yeniden initialState olarak ayarlayın ve çerezi kaldırın.

Basit, ama benim için çalışıyor.

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

☝ Bu dosya biraz tüylü, ama sadece initAuth, loginUser, logoutUser, receiveAccessToken, resetAuthed fonksiyonlarını kontrol: Burada kodunu kontrol edebilirsiniz.

Gösteri: Genellikle belirli koşullar karşılanmış olup olmadığını kontrol etmek için bir authorized katman fonksiyonunu tanımlamak ve değilse, yönlendirmesine bir oturum redüktör olan kimlik doğrulama kolu ve https://soundredux.io

Answer 3

. Şimdiye kadar oldukça iyi çalıştı.

Düzen, basit bir örnekle: https://github.com/andrewngu/sound-redux (a SoundCloud istemcisi ile: Bu bir cevap değil iken

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