gpt4 book ai didi

vue.js - 保留登录用户信息

转载 作者:搜寻专家 更新时间:2023-10-30 22:22:07 25 4
gpt4 key购买 nike

我成功地使用 laravel passport 登录了。我有 token ,太好了。但是我想保留登录的用户信息,姓名,头像等等。

我的登录程序获得了 oauth token 。在仪表板组件中,我对用户数据进行 api 调用。

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

最佳答案

您可能会考虑的一些选项

  • 将数据存储在 cookie 中
  • 使用本地存储
  • 将所有内容都保存在根 vue 实例中
  • 将所有内容保存在包装的 vue 组件中

我的建议是将身份验证 token 存储在 cookie 中——这实际上是成功调用后端所必需的。这将使您发送的每个请求都非常容易访问它。

要存储用户信息,我建议创建一个包装组件或使用根 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>

您在路由器 View 中显示的组件然后可以访问用户属性

示例组件

...

props: ['user'],

...

<template>
<span>{{ user.name }}</span>
</template>

...

重要提示:要使这项工作正常进行,您还需要将 props: true 添加到您的路线定义中。这里详细解释了一切:https://router.vuejs.org/en/essentials/passing-props.html

备注:如果您不想在包装组件中加载用户数据,您可以在其他任何地方加载它并使用事件总线将结果传输到包装组件。但是,您应该始终只有一个关于用户信息的真实来源。仅将其存放在一个地方。

关于vue.js - 保留登录用户信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43469358/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com