Koşullu olarak güvenli rotalar (kullanıcı kayıt akışı)

Question

Reaktif-yönlendirici-4 kullanarak kayıt akışını uygulamaya koymam gerekiyor. Akış aşağıdaki adımlardan oluşur:

1. hesabı (e-posta/geçiş)
2. E-posta onayı
3. oluşturma profili (vb City, Age gibi profil bilgileri, zorunlu alanlar)

Başvuru koşulları oluşturun: kullanıcı giriş yapmadığında ise

• , hep Login sayfakanalize edilmesi gerektiği Kullanıcı giriş yaptıysa, ancak e-posta doğrulanmadıysa, her zaman ConfirmEmail sayfasına yönlendirme yapmalıdır (URL adres çubuğuna yazdığı URL'den bağımsız olarak, birkaç gün sonra uygulamayı yükledikten sonra bile)
• kullanıcı e-postayı doğruladıysa ancak henüz profil oluşturmadı yoktu, kullanıcı bu adıma onu yönlendirmek her zaman isteyen bazı adımı bitmiş olmasaydı onu hep CreateProfile sayfa Yani

yönlendirilmek istiyorsunuz (hatta hangi URL bakılmaksızın uygulama ve yüklemeden sonra o tarayıcıya yazın).

Bir seçenek olarak, kullanıcıyı zaten onaylamışsa (ya da profili zaten oluşturduysa, CreateProfile sayfasına erişimi kısıtlıyorsa) ConfirmEmail sayfasına erişmesini kısıtlamak istiyorum.

, bu mantığı React yönlendirici 4'ü kullanarak nasıl gerçekleştirir? Bence uygulamanın temel/temel bir özelliği, bu yüzden iyi, ölçeklenebilir bir çözüm arıyorum.

Ayrıca Redux kullanıyorum, lütfen bir noktada Redux durumunda aşağıdaki değişkenleri zaten unutmayın: isLoggedIn, isEmailConfirmed, isProfileCreated.

Teşekkürler.

Answer 1

isLoggedIn, isEmailConfirmed, isProfileCreated'un nasıl veya ne zaman ayarlanacağını belirlemediniz, bu nedenle, bunların bir şekilde işleme başlamadan önce redux deposunda ayarlanacağını varsaydım.

Bu görev için en iyi aracın, auth workflow example in RR4 docs benzeri satır içi Route görüntülemenin kullanılması olacağını düşünüyorum.

İstediğiniz şeyi yapan sample CRA app'u yaptım.

sen index.jsredux/özelliklerin değerlerini değiştirirseniz:

const INITIAL_STATE = { 
    isLoggedIn: false, 
    isEmailConfirmed: false, 
    isProfileCreated: false, 
} 

... uygulaması olursa olsun erişmeye çalıştığınızda hangi URL, uygun görünümü oluşturmak için kullanacaktır. Örneğin, setEmailConfirmed = true ve isProfileCreated = false değerini ayarlarsanız, erişiminiz olan tek rota /create-profile (CreateProfile bileşeni) olur. Kullanıcı ancak kayıt adımlarının her adımını tamamladıysa ve isProfileCreated = true ise, kayıt olanlar hariç her rotaya erişebilecektir.

class App extends Component { 
    render() { 
    return (
     <div> 
     <nav> 
      <Link to="/">login</Link> 
      <Link to="/create-account">create account</Link> 
      <Link to="/confirm-email">confirm email</Link> 
      <Link to="/create-profile">create profile</Link> 
      <Link to="/dashboard">dashboard</Link> 
     </nav> 
     <Switch> 
      <AuthorizedRoute exact path="/" component={Login} /> 
      <AuthorizedRoute path="/create-account" component={CreateAccount} /> 
      <AuthorizedRoute path="/confirm-email" component={ConfirmEmail} /> 
      <AuthorizedRoute path="/create-profile" component={CreateProfile} /> 
      <AuthorizedRoute path="/dashboard" component={Dashboard} /> 
      <Redirect to="/" /> 
     </Switch> 
     </div> 
    ) 
    } 
} 

Ben zor kısmı aslında doğru kullanıcı ve ne o belirlemektir düşünüyorum: Bu mantık farkında bileşenleri tanımlanmaktadır burada

import React from 'react' 
import { Redirect, Route } from 'react-router-dom' 
import { connect } from 'react-redux' 

const AuthorizedRoute = ({ component: Component, isProfileCreated, isEmailConfirmed, isLoggedIn, ...rest }) => (
    <Route {...rest} render={props => { 
    //-- if user is fully registered - grant him every route except registration steps. 
    if (isProfileCreated) { 
     if (['/', '/create-account', '/create-profile', '/confirm-email'].includes(props.location.pathname)) { 
     return <Redirect to="/dashboard" /> 
     } else { 
     return <Component {...props} /> 
     } 
    } 

    //-- user is not fully registered so he needs to be redirected to next step... 
    if (isEmailConfirmed) { 
     if (props.location.pathname === '/create-profile') { 
     return <Component {...props} /> 
     } else { 
     return <Redirect to="/create-profile" /> 
     } 
    } 
    if (isLoggedIn) { 
     if (props.location.pathname === '/confirm-email') { 
     return <Component {...props} /> 
     } else { 
     return <Redirect to="/confirm-email" /> 
     } 
    } 

    //-- ... or allowed to use `Login` or `CreateAccount` page 
    if (props.location.pathname === '/' || props.location.pathname === '/create-account') { 
     return <Component {...props} /> 
    } 
    return <Redirect to="/" /> 
    }} /> 
) 

export default connect(
    (state) => ({ 
    isProfileCreated: state.isProfileCreated, 
    isEmailConfirmed: state.isEmailConfirmed, 
    isLoggedIn: state.isLoggedIn, 
    }), 
)(AuthorizedRoute) 

Ve:

Route Enhanced AuthorizedRoute adında izin verilir veya yapılmaz. Bunun dışında, sadece o rotayı tanımlamak veya yönlendirmek için o rotaya girmeye ve onu yönlendirmeye çalışmaktır.