2017-12-14 55 views
7

Tôi cần triển khai luồng đăng ký bằng phản ứng-router-4. Dòng chảy bao gồm các bước sau:Các tuyến đường bảo mật có điều kiện (luồng đăng ký người dùng)

  1. Tạo tài khoản (email/pass)
  2. Confirm email
  3. Tạo hồ sơ (xem chi tiết hồ sơ như thành phố, Tuổi vv, các trường bắt buộc)

yêu cầu ứng dụng:

  • nếu người dùng không đăng nhập, anh ấy luôn được chuyển hướng đến Login trang
  • nếu người dùng đăng nhập, nhưng email chưa được xác nhận, anh ấy phải luôn chuyển hướng đến trang ConfirmEmail (bất kể URL anh nhập vào thanh địa chỉ url, ngay cả sau khi tải ứng dụng sau vài ngày)
  • nếu người dùng xác nhận email, nhưng chưa tạo tiểu sử, tôi muốn anh ấy luôn được chuyển hướng đến CreateProfile trang

Vì vậy nếu người dùng không hoàn thành một số bước, tôi luôn muốn chuyển hướng anh ấy đến bước này (bất kể ứng dụng tải lại và bất kể URL nào anh ấy gõ vào trình duyệt).

Là một tùy chọn tôi muốn hạn chế người dùng truy cập ConfirmEmail trang nếu anh ấy đã xác nhận trang đó (hoặc hạn chế quyền truy cập vào trang CreateProfile nếu anh ấy đã tạo tiểu sử).

Cách thanh lịch triển khai logic này bằng cách sử dụng bộ định tuyến phản ứng 4? Tôi nghĩ rằng đó là một tính năng cốt lõi/cơ bản của ứng dụng, vì vậy tôi đang tìm kiếm giải pháp tốt, có khả năng mở rộng.

Ngoài ra tôi đang sử dụng Redux, vì vậy xin lưu ý rằng tại một số thời điểm tôi đã có các biến sau trong trạng thái Redux: isLoggedIn, isEmailConfirmed, isProfileCreated.

Cảm ơn.

+0

Câu trả lời Tomasz là tốt, bạn cũng nên sử dụng [Redux Persist] (https://github.com/rt2zz/redux-persist) để duy trì lưu trữ Redux của bạn trong [LocalForage] (https://github.com/localForage/localForage) hoặc LocalStorage – Dyo

+0

Bạn có ý nghĩa gì khi thực hiện Đăng ký sau khi đăng nhập. Làm cách nào để đăng nhập vào ứng dụng của bạn mà không cần đăng ký –

Trả lời

2

Bạn không chỉ định cách thức hoặc khi nào isLoggedIn, isEmailConfirmed, isProfileCreated sẽ được đặt vì vậy tôi cho rằng chúng sẽ được đặt bằng cách nào đó trong kho lưu trữ Redux trước khi hiển thị bắt đầu.

Tôi nghĩ rằng công cụ tốt nhất cho tác vụ này sẽ là sử dụng nội tuyến Route hiển thị tương tự như auth workflow example in RR4 docs.

Tôi đã thực hiện sample CRA app làm những gì bạn yêu cầu.

Nếu bạn thay đổi giá trị tài sản trong Redux/index.js:

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

... ứng dụng sẽ sử dụng nó để render xem phù hợp, không có vấn đề gì URL mà bạn đã cố gắng truy cập. Ví dụ: nếu bạn đặt isEmailConfirmed = trueisProfileCreated = false thì tuyến đường duy nhất bạn sẽ có quyền truy cập là /create-profile (thành phần CreateProfile). Nếu người dùng đã hoàn thành mọi bước đăng ký và isProfileCreated = true thì sau đó người đó sẽ có quyền truy cập vào mọi tuyến trừ các tuyến đăng ký.

Tăng cường Route tên AuthorizedRoute:

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) 

Và đây được định nghĩa thành phần mà nhận thức của logic này:

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

Tôi nghĩ rằng phần khó nhất là để thực sự chính xác xác định người sử dụng và những gì ông được phép hoặc không làm. Ngoài ra, đó chỉ là vấn đề xác định lộ trình mà anh đang cố gắng truy cập và hiển thị tuyến đường đó hoặc chuyển hướng.

+0

Không có trang Đăng nhập tại đây. – zarcode

+0

@zarcode Bạn nói đúng. Tôi quên mất điều đó và tôi đã thay đổi để phản ánh điều đó. – Tomasz

Các vấn đề liên quan