2017-12-26 4 views
0

私は、私のRailsバックエンドと私のリアクションフロントエンドの間に最小限の認証層を設定しようとしていますが、いくつかの問題が発生しています。Reactでレールにミニマム認証を設定するには?

  1. サーバーがクライアントに渡すCookieキーの値が見つからないようです。 [ネットワーク]タブでは、応答:Set-Cookie:_skillcoop_session=....に表示されますが、上記のクッキーを探すのにを検索するのにjs-cookieを使用すると、identity-token=...と表示され、その値は_skillcoop_sessionとは異なります。ブラウザで_skillcoop_sessionにアクセスするにはどうすればよいですか?

  2. 「この」ヘッダーキーを使用して保存したセッションと一致させるために、バックエンドに送信するためにサーバーに渡すヘッダーキーは何ですか? this postではJustin Weissが次のようなヘッダーでサーバーにリクエストを行うことを提案しているようです:Cookie: _skillcoop_session=....

  3. 私はこれをすべて間違っていますか? deviseのような宝石を使ったほうがいいですか?

  4. また、私の他のコントローラにセッションをロードするために、私はsession['init'] = trueのような何かをしなければならなかったので、これをSO postからやることを学びました。これはハッキーなようだ。別のコントローラアクションのセッションを別のコントローラアクションの以前に別のリクエストで設定した後で、セッションを手動でリロードする必要があるのはなぜですか?

私は現在だけで、ユーザーと認証を行うスタブだ - 私は場所で膨化を取得するためにやりたいすべてがsession[:user_id]を設定し、他のコントローラのアクションでそのセッションデータを読み取ることができています。このために私は考慮すべき2つのメインファイル、すなわちUsersControllerTransport.jsを持っています。 UsersController私はsession[:user_id]を番号1でスタブしています。Transport.jsクライアントからのリクエスト間でバックエンドがセッションを維持できるように、サーバーから受信したクッキーを渡したいと思います。ここで

は私のコントローラである:ここでは

class UsersController < ApplicationController 

    def create 
    session[:user_id] = 1 
    render json: user_stub, status: :ok 
    end 

    def show 
    puts "user id: #{session[:user_id]}" 
    # should return, 1, but is returning, nil...why? 
    render json: user_stub, status: :ok 
    end 

    private 

    def user_stub 
    { 
     id: 1, 
     email: params['email'] || '[email protected]', 
     password: params['password'] || 'fake password' 
    } 
    end 
end 

は、私は、サーバーへの私の要求を作る私のアプリの主な場所はある - それは私がTransport.js呼び出す抽象化である:

require('es6-promise').polyfill(); 
require('isomorphic-fetch'); 
var cookie = require('js-cookie'); 


const GET = 'GET'; 
const POST = 'POST'; 

function Transport() { 
} 

Transport.prototype.get = function(url, options = {}) { 
    return this.query(GET, url, null, options); 
}; 

Transport.prototype.post = function(url, dataString, options = {}) { 
    return this.query(POST, url, dataString, options); 
}; 

Transport.prototype.query = function(method, url, dataString, options = {}) { 
    var data; 

    if (dataString) { 
    data = JSON.parse(dataString); 
    } 

    switch(method) { 
    case GET: 
     return fetch(url, Object.assign({headers: {'Cookie': cookie.get('_skillcoop_session')}}, options, { 
     method: method 
     })); 
    case POST: 
     return fetch(url, Object.assign({ 
     headers: { 'Content-Type': 'application/json' }, 
     body: JSON.stringify(data) 
     }, options, { 
     method: method 
     })); 
    default: 
     throw new Error("This HTTP Method is not supported."); 
    } 
}; 

module.exports = Transport; 

答えて

0
  1. これによると、SO postは、JS内のSet-Cookieヘッダーにアクセスできません。したがって、私は応答ヘッダーでSet-Cookieを処理しようとする私の試みが愚かな努力だったと思います。

  2. According to私はHTTPリクエストを行うために使用していNPMパッケージには、私が「自動的に現在のドメインのクッキーを送信」し​​ますfetch、に2つ目の引数に{credentials: 'same-origin'}キーと値のペアを渡す必要があります。それはトリックでした - セッションオブジェクトは利用可能で、前のリクエストのセッションで別のアクションで設定されたuser_idを含んでいます。

  3. はい。私はこの問題にどのようにアプローチしたかを変更しました。このReddit postに非常に大きく寄りかかった。要するに、バックエンドでruby-jwtを使用し、フロントエンドにlocalStorageというトークンを格納します。サーバーへの各要求は、トークンをヘッダーAUTHORIZATIONに含めます。

  4. 次の手順1と2では、セッションを再ロードする必要がなくなったようです。

関連する問題