2016-07-19 1 views
1

ReactJS + Redux를 사용하여 로그인 및 등록 페이지를 만들려고합니다. 현재 사용자 등록 후, 등록 정보를 사용하여 사용자의 객체 배열 안에 저장됩니다백엔드 (ReactJS + Redux)에 연결할 필요없이 어떻게 로그인 및 등록 페이지를 생성합니까?

const userDataReducer = function(users = [], action){ 
    switch (action.type){ 
    case 'ADD_USER': 
     return[{ 
     username: action.username, 
     email: action.email, 
     name: action.name, 
     password: action.password 
     }, ...users] 

과 등록되면, 사용자는 로그인 양식에 사용자 이름과 암호를 입력하고 제출 :

verifyLoginUser()

userDataReducer.js과 함께 확인 내측 { 에서는 event.preventDefault()

if(this.props.actions.verifyUser(this.props.loginUser.username, this.props.loginUser.password)){ 
    console.log('LOGGED IN') 
} else { 
    console.log('NOT LOGGED IN') 
} 
}

다음

case 'VERIFY_USER': 
    let isVerified = false; 
    users.forEach((user)=> { 
    if(user.username === action.username && user.password === action.password){ 
     isVerified = true; 
     return false; 
    } 
    }); 
    return isVerified; 

있는 작업은 다음과 같습니다 : 사용자가 로그인하고 제출을 클릭하려고하면

addUser: function(username, email, name, password) { 
    return { 
     type: 'ADD_USER', 
     username: username, 
     email: email, 
     name: name, 
     password: password 
    } 
    }, 

    verifyUser: function(username, password){ 
    return { 
     type: 'VERIFY_USER', 
     username: username, 
     password: password 
    } 
    } 

는 현재, 그냥 어떤 경우에 '로그인'반환하고 있습니다.

ReactJS + Redux에서 프런트 엔드를 통해 로그인 및 등록 페이지를 만드는 올바른 방법입니까? 모든지도 또는 통찰력은 크게 평가 될 것입니다. 미리 감사드립니다.

답변

1

"로그인 및 바로 프런트 엔드를 통해 등록"아마이 책의 모든 내용에가는, 그래서 당신은 모범 사례를 구현을 찾고 있다면, 그 좋은 시작하는 장소가 될 수 있습니다 - 반응하고 돌아 오는에 관한 https://www.quora.com/Is-it-possible-to-do-client-side-only-javascript-authentication

, 코드가 좋아 보인다. 난 그냥 당신의 행동에 대해 2 가지를 지적 할 것이다 :

  1. 행동이 payload 속성을 포함하는 것이 좋습니다 - https://github.com/acdlite/flux-standard-action

  2. VERIFY_USER 것은에만 저장 데이터를하지 읽고있다. 따라서 실제로 코드에서 액션이 필요하지 않으며 코드가 감속기에 있어야합니다. 이 코드는 아마도 인증 구성 요소의 한 방법 일 것입니다.