2017-04-18 2 views
3

laravelパスポートでログインできました。私は素晴らしいトークンを持っています。しかし、私はユーザー情報、名前、アバターなどをログインしたままにしておきたい。ログインしたユーザー情報を保持する

ログイン手順でoauthトークンが取得されます。ダッシュボードコンポーネントでは、ユーザーデータをAPI呼び出しします。

グローバルVueオブジェクトに保存するか、Vuexを使用する必要がありますか?それは安全ですか?

+0

あなたはどのようにより多くの情報を与えることができますvueを使用していますか?ルータを使用してリロードしない1ページのアプリケーションを構築していますか? –

+0

私はシングルページアプリケーションを作っていますし、私はvue-routerを使っています。 – cssBlaster21895

+1

次に、root-vueインスタンスのユーザ情報を保持し、router-viewを使用して他のすべてのコンポーネントにその情報を伝播することができます。もう1つの選択肢は、この情報を保持するラップビューコンポーネント(通常はインラインコンポーネント - >テンプレートなし)を宣言することです。また、必要なデータをウィンドウに直接バインドすることも、ローカルストレージに保存することも、Cookieデータとして保存することもできます。 –

答えて

2

クッキーで

  • ストアデータ
  • 利用のlocalStorage
  • はラッピングVUEコンポーネント

ですべてを保つ

  • ルートVUEインスタンスのすべてを保つ検討するかもしれないいくつかのオプション私の提案は、authトークンを格納することです - 実際にはバックエンドを正常に呼び出すために必要です - クッキーでこれにより、送信するリクエストごとに簡単にアクセスできます。

    ユーザー情報を保存するには、ラッピングコンポーネントを作成するか、ルートビューインスタンスを使用することをお勧めします。次の例ではこれを解決する必要があります。

    ラッピングホームコンポーネント(インラインテンプレート)

    data: function() { 
        return { userinfo: {} } 
    }, 
    
    created: function() { 
        // load your user info 
    } 
    

    次に、あなたのindex.html /メインビューに

    <body> 
        <home inline-template> 
        <!-- any stuff here --> 
    
        <!-- pass the user prop to every component that is shown in the userinfo --> 
        <router-view :user="userinfo"></router-view> 
        </home> 
    </body> 
    

    あなたのコンポーネントを、それを使用するルータ・ビューに表示されていることができ、その後ユーザープロップにアクセスする

    サンプルコンポーネント

    ... 
    
    props: ['user'], 
    
    ... 
    
    <template> 
        <span>{{ user.name }}</span> 
    </template> 
    
    ... 
    

    重要:あなたのルートの定義に真:あなたも小道具を追加する必要があります。この作品を作るために。 https://router.vuejs.org/en/essentials/passing-props.html

    備考:ラッピングコンポーネントにuserdataをロードしたくない場合は、他の場所にロードしてイベントバスを使用して結果をラッピングコンポーネントに転送することができます。ただし、ユーザー情報に関しては、常に真実のソースを1つだけ持つ必要があります。それを一箇所に保管してください。

  • 0

    私が使用するセッションヘルパーは本当に簡単に発見し、それが世界的にOAuthのトーク​​ンを使用して問題を解決:

    参照:https://laravel.com/docs/5.4/session、見出し:グローバルセッションヘルパー

    関連する問題