2017-06-26 8 views
6

ご存じのように、Webアプリケーションでは、認証にセッションやCookieが必要です。 Vue.JSとFlaskのマイクロフレームワーク、例えばERPやCRMを使ってWebアプリケーションを構築しようとしています。VueとFlaskでセッションを操作する方法は?

私は混乱しています。どのようにセッションで作業できますか?我々はフラスコ内で、このようなコードを持って考えてみましょう:

import os 
from flask import Flask, request, jsonify, abort, session 

app = Flask(__name__) 
app.config['SECRET_KEY'] = os.getenv('SECRET_KEY') or \ 
    'e5ac358c-f0bf-11e5-9e39-d3b532c10a28' 

@app.route('/login', methods=['POST']) 
def user_login(): 
    user = request.form['user'] 
    session['isLogged'] = True 
    return jsonify({'status': session['isLogged']}) 

@app.route('/user-info') 
def user_info(): 
    if 'isLogged' in session: 
     return jsonify({'user': 'ali'}) 
    else: 
     return jsonify({'error': 'Authentication error'}) 

と私たちのフロントエンドのコードは次のようにする必要があります:私はページを更新するまで

mounted() { 
    this.checkIsLogged(); 
    }, 
    methods: { 
    checkIsLogged() { 
     fetch('http://127.0.0.1:5000/user-info', { 
     mode: 'no-cors', 
     method: 'GET', 
     }).then((resp) => { 
     return resp; 
     }).then((obj) => { 
     if(obj.user) { 
      this.status = true 
     } 
     }) 
    }, 
    login() { 
     let frmData = new FormData(document.querySelector("#frmLogin")); 

     fetch('http://127.0.0.1:5000/login', { 
     mode: 'no-cors', 
     method: 'POST', 
     body: frmData, 
     }).then((resp) => { 
     return resp; 
     }).then((obj) => { 
     this.status = obj.status 
     }) 
    } 
    } 

すべてが正常です。ページを更新するとセッションが失われます。

サーバー側のセッションは、多くの理由から重要です。私がlocalStoreか何かのようなものを使用すれば、どうやって安全にすることができるのでしょうか?

私は同様のプロジェクトを担当してくれた助けが必要です。あなたは私に提案をすることができます。私は似たようなプロジェクトをしたことがないからです私はこのトピックに読んだ

その他のもの:

は、私はまだ私が何ができるかについての混乱しています。

+1

クロスドメインでリクエストを送信していますか?セッションとクッキーはどこに送られませんか? –

答えて

1

セッション処理は、SPAが本当に気にかけていないものです。セッションは、ユーザーエージェント(ブラウザ)とサーバーの間にあります。あなたのvueアプリケーションはそれとはあまり関係ありません。それはあなたが何か間違ったことをすることはできないと言っているわけではありませんが、通常、問題はフロントエンドではありません。

これは難しいと言われていますが、何が間違っているのかわからないので、この質問に答えてください。私ができることは、あなたがこの種の問題をどのように診断できるかについての指示を与えることです。この診断では、実際の問題がどこにあるのかを把握し、少なくとも私にとっては、自分が何をする必要があるのか​​が明らかになります。

ステップ1)

サーバーの応答を(個人的に私は時に怠惰なカールやポストマンを使用)を確認するためにいくつかの低レベルのHTTPツールを使用します。ログイン要求をサーバーに送信し、応答ヘッダーを確認します。 ログインに成功すると、 "set-Cookie"というヘッダーがあります。通常は "sessionid"という内容、またはセッションに使用しているキーがあります。 次の「のSet-Cookie」のいずれかに該当する表示されない場合:

  • サーバーがセッションを開始しませんでしたので、プロキシがあります
  • クライアントにセッションクッキーを送信しませんでした/ファイアウォール/アンチアドイン/トラッキングプラグインのいずれかを除外するCookies

Set-Cookieヘッダーが表示されている場合は、手順2に進みます。そうでない場合は、選択したバックエンドテクノロジのセッションに関するマニュアルを確認してください。

ステップ2)

ありがたいことに、最新のブラウザを使用して、二つのことを行うことを可能にする開発者のコ​​ンソールがあります 1)あなたのHTTPリクエストヘッダ、ボディとレスポンスヘッダとボディ 2)が格納されているを見てみましょうチェッククッキー

(Chromeでは、開発者コンソールの[ネットワーク]タブにあります)、要求と応答を診断します。これを行うには、アプリでログインを実行しているときに開発者コンソールを開いておく必要があります。ログインの応答を確認します。ログインが成功した場合は、Set-Cookieが含まれているはずです。 クッキーが存在しない場合、サーバーは送信しません。これはおそらくセキュリティ上の理由(原点通過ポリシー)のためです。

存在する場合は、クッキーがクッキーストアに存在する必要があります。 Chrome開発者コンソールで[アプリケーション]タブに移動し、左側のメニューから[Cookies]を展開し、Cookieが存在するホストを確認します。前のステップで設定されたクッキーが存在するはずです。そうでなければ、ブラウザはクッキーを受け入れなかった。これは通常、Cookieが正しいドメインまたはパスではない場合に発生します。そのような場合は、ドメインやパスを空の値または正しい値に設定しようとすることができます(パス "a"の場合)。 あなたのクッキーが存在する場合、)3

ステップ3に進みます

私はアプリはセッションとは何の関係もないと述べたときに覚えておいてください。 ajaxで送信するか、ブラウザに有効なURLを入力するだけで、このホストに存在するすべてのCookieがリクエストヘッダーに送信されます。それはあなたが積極的に使用しているライブラリを妨げない限りです。 次のいずれかのセッションクッキーが含まれていない、あなたの要求は通常、trueの場合:

  • あなたのHTTPライブラリの利用を積極的にあなたが正しい要求が、cookie-を送っている
  • クッキーの送信を防止ドメイン/パスは、要求ホスト/パスと一致していないので、あなたのクッキーがあなたのクッキーが正しく送信されている場合は、あなたのセッションの取り扱いがあなたのない限り、動作するはずの超短命で、すでに

期限が切れてい

  • に沿って送信されることはありませんサーバーはremしないそのセッションを有効にするか、既存のセッションに関係なく新しいセッションを開始します。

    私はこの質問がかなり古く、この広範な答えが遅すぎると認識していますが、同様の問題を抱えている人には利益があるかもしれません。

  • 関連する問題