2017-04-18 210 views
3

我設法用laravel護照登錄。我有令牌,很棒。但我想保持登錄用戶信息,名稱,頭像等。保持登錄狀態用戶信息

我的登錄過程獲取oauth標記。在儀表板組件中,我使用API​​調用用戶數據。

我應該將它們放在全局Vue對象中還是使用Vuex?它安全嗎?

+0

你能給你如何瞭解更多信息正在使用vue?你正在建立一個單頁應用程序,它永遠不會使用路由器重新加載? –

+0

我正在製作單頁面應用程序,並使用vue-router。 – cssBlaster21895

+1

您可以將用戶信息保存在root vue實例中,然後使用路由器視圖將其傳播到所有其他組件。另一種選擇是聲明一個包裝vue組件(通常是內聯組件 - >不含模板)來保存這些信息。您也可以直接將所需的數據綁定到窗口,或將其放入本地存儲或作爲cookie數據。 –

回答

2

一些選項,你可以考慮在餅乾

  • 存儲數據
  • 使用localStorage的
  • 把一切都在根VUE實例
  • 把一切都在一個包裝VUE組件

我的建議是存儲身份驗證令牌 - 實際上需要成功調用您的後端 - 在一個cookie中。這可以讓您在發送每個請求時輕鬆訪問它。

要存儲用戶信息我建議創建一個包裝組件或使用root vue實例。下面的例子應該清楚這一點。

包裹回家組件(聯模板)

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,則可以將其加載到任何其他地方並使用事件總線將結果傳輸到包裝組件。但是,關於用戶信息,您應該始終只有一個真相來源。只能將它存儲在一個地方。