javascript - 在 Vue 中将数据在子级之间传递

Question

所以..在我的应用程序中，在身份验证章节中，我有一些问题。

首先，我有多个组件/路由，其中​​两个是注册和登录。

注册工作正常，使用我的API，作为响应，我得到一个用户名和account_id，两者都存储在数据库中。

当尝试登录时，我得到用户名和 token 作为响应。现在，当我访问网站中的其他路由时，只有登录后才能访问，我需要检测 token 是否存在。我怎样才能像一个具有 token 值的全局变量一样并且可以被其他组件轻松访问？

Answer 1

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

如果您使用 Axios 或任何其他工具进行 ajax 请求，您可以在 header 中传递 token ，然后从 cookie/本地存储中获取它。

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