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(){ event.preventDefault()

​​

}

内側userDataReducer.jsと検証次

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. それは、​​プロパティを格納するための行動のための良い方法です - https://github.com/acdlite/flux-standard-action

  2. VERIFY_USERだけで、データの読み込み保存されていません。だからあなたは実際にそこで行動する必要はなく、コードは減速機に住む必要もありません。そのコードはおそらくあなたの認証コンポーネントのメソッドであるべきです。

関連する問題