在Vue中将数据从孩子传递给孩子答案

【问题标题】：Pass data from child to child in Vue在Vue中将数据从孩子传递给孩子
【发布时间】：2019-04-25 11:03:47
【问题描述】：

所以.. 在我的申请中，在Authentication 章节，我有一些问题。

首先我有多个组件/路由，其中两个是register 和login。

Register 工作正常，使用我的 api，作为响应，我得到一个 username 和 account_id，两者都存储在数据库中。

当尝试log in 时，我得到username 和token.. 现在，当我访问我网站中只有您登录后才能访问的其他路线时，我需要检测是否存在令牌。我怎样才能像一个具有token 值的全局变量一样，它可以被其他组件轻松访问？

【问题讨论】：

你好。这个问题对于 StackOverflow 标准来说太宽泛了，通常存在一个非常具体的代码示例问题。如何处理它取决于您的设置 - 您使用的是 Vue Router 还是 VueX？等等。在高层次上，你需要将你的令牌存储在 Vuex 商店中，如果你有一个，或者作为一个全局变量。然后您必须在每次路由转换之前使用Vue router navigation guards 来检查有效令牌。您可能还需要传递您的令牌以及您可能需要发出的任何其他 API 请求。

标签： javascript authentication vue.js token registration

【解决方案1】：

将您的令牌存储在 cookie / localstorage 中，如果您使用的是 vuex，您也可以将其存储在状态中。

如果您使用 Axios 或任何其他工具进行 ajax 请求，您可以在标头中传递您的令牌，然后从 cookie / localstorage 中获取它。

state: {
   token: Cookie.getJSON('token') || null,
},
mutations: {
  setToken: (state, data) => {
    state.token = data
    Cookie.set('token', data)
  }
},
actions: {
  setToken (context, data) {
    context.commit('setToken', data.token)
  }
}

检查这个 - https://www.npmjs.com/package/js-cookie

【讨论】：

但是哪个更好用呢？ Cookies 还是 Vuex 整体？主要区别是什么？ Cookies 很容易使用，还不够吗？ Vuex 也一样 .. ?
我使用 cookie（以防用户刷新页面）并使用 vuex 存储（在我的 SPA 中使用它）。我将代码放在上面的答案中。
哦，这看起来很简单也很有用。谢谢您的答复。但是要确保..：您的代码很好，对吗？我的意思是这种将两者结合的方式提供了良好的稳定性，我在开发网站的过程中应该不会遇到问题吗？
我在一个网站上工作——coversingers.com，我使用了相同的代码。只需确保在您注销用户时，取消设置状态并删除 cookie。