保持登录状态用户信息

问题描述:

我设法用laravel护照登录。我有令牌,很棒。但我想保持登录用户信息,名称,头像等。保持登录状态用户信息

我的登录过程获取oauth标记。在仪表板组件中,我使用API​​调用用户数据。

我应该将它们放在全局Vue对象中还是使用Vuex?它安全吗?

+0

你能给你如何了解更多信息正在使用vue?你正在建立一个单页应用程序,它永远不会使用路由器重新加载? –

+0

我正在制作单页面应用程序,并使用vue-router。 – cssBlaster21895

+1

您可以将用户信息保存在root vue实例中,然后使用路由器视图将其传播到所有其他组件。另一种选择是声明一个包装vue组件(通常是内联组件 - >不含模板)来保存这些信息。您也可以直接将所需的数据绑定到窗口,或将其放入本地存储或作为cookie数据。 –

一些选项,你可以考虑在饼干

  • 存储数据
  • 使用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,则可以将其加载到任何其他地方并使用事件总线将结果传输到包装组件。但是,关于用户信息,您应该始终只有一个真相来源。只能将它存储在一个地方。

我发现会议助手很容易使用,它解决了全球范围内使用OAuth令牌的问题:

见:https://laravel.com/docs/5.4/session,标题:全球会议助手