2016-10-01 13 views
1

サーバーからページをレンダリングするNodeJS(Koa)サーバーアプリケーションがあります。これはnunjucks/jade/etcです。ログインページもサーバレンダリングされます。ログインすると、クッキーが作成されます。NodeJS:サーバーレンダリングビューとReactアプリケーションの間でセッションを共有する最良の方法は何ですか

私は安全なページに埋め込まれる反応アプリを作成しています(ユーザーがログインした後)。その反応するアプリケーションが、現在ログインしているユーザーのセッションを使用してサーバーに安全なHttp/Websocketリクエストを作成する最も良い方法は何ですか?

現在、ReactアプリケーションがロードされるサーバーレンダリングされたページのscriptタグにsessionIdを挿入しています。だから... ...

サーバー:

​​

はクライアント:

<script> 
var sessionId = {{sessionIdFromServer}}; 
</script> 
... 
<div id='app'> react app loads here </div> 

その後、私は私のクライアント側のHTTP/WebSocketの要求(特に、WebSocketの)でそのセッションID変数を使用します。

クライアントが要求する(ソケットの場合はsessionIdを渡す)たびに、サーバーは基本的にRedisセッションストアをチェックして要求を実行する前にそのセッションがまだ有効かどうか(期限切れまたはログアウトしていないかどうか)を確認します。

これは実行可能で安全なアプローチですか?

答えて

0

あなたのセッションでは、クッキーを使用するだけです。このようにして、フロントエンドのAJAX呼び出し(WebSocketを含む)は要求ヘッダー内のCookieを使用します。

クッキーにHTTP Only設定が設定されていると、フロントエンドのJavaScriptはセッションクッキーを変更(またはアクセス)することはできませんが、依然として送信要求に対してブラウザが使用します。

私の意見では、これは最初の場所にクッキーの存在を知る必要があるフロントエンドなしで、セッションIDを使用するための最も安全な方法です。

koaのセッションがもう存在しない場合は、ユーザーが自動的にログアウトしていることも自動的に認識されます。

私は(下のGithubのリンクがあります)。このために少し例を作りました:

まずindex.jsを:

'use strict'; 

const session = require('koa-session'); 
const koa = require('koa'); 
const websockify = require('koa-websocket'); 
const route = require('koa-route'); 

const app = websockify(koa()); 

app.keys = ['some secret hurr']; 
const sessionStore = session(app); 

app.use(sessionStore); 
app.ws.use(sessionStore); 

app.use(route.all('/', function* (next) { 
    // ignore favicon 
    if (this.path === '/favicon.ico') return; 

    let n = this.session.views || 0; 
    this.session.views = ++n; 
    yield next; 
})); 

app.ws.use(route.all('/', function* (next) { 
    this.websocket.on('message', (message) => { 
    let n = this.session.views || 0; 
    this.session.views = ++n; 

    if (message === 'ping') { 
     // Return the amount of sessions (n) when the client sends ping 
     this.websocket.send('pong ' + n); 
    } 
    }); 

    yield next; 
})); 

app.use(require('koa-static')('./public')); 

app.listen(3000); 
console.log('listening on port 3000'); 

そしてindex.html

<html> 
    <script> 
    var ws = new WebSocket("ws://localhost:3000/"); 

    ws.onopen = function() { 
     // Sends a message 
     ws.send("ping"); 
    }; 

    ws.onmessage = function(e) { 
     // Receives a message. 
     alert(e.data); 
    }; 

    ws.onclose = function() { 
     alert("closed"); 
    }; 
    </script> 
</html> 

私はこれをすべて作業用のexamplに入れましたe on GitHub

関連する問題