使用Vuex解决Vue中的身份验证问题

传统方式中，许多人使用本地存储，来管理通过客户端验证生成的tokens。一个大问题是如何有更好的方式，来管理验证tokens，从而允许我们来存储更大的用户信息。

这就是Vuex的作用。 Vuex为Vue.js应用管理状态.。对于应用中所有的组件来说，它被当做中央存储，并用规则确保状态只能以可预见的方式改变。

对于经常检查本地存储来说，听起来是个更好的选择？让我们一起来探索下吧。

建立应用模块

对于这个项目，我们想创建一个使用vuex和vue-router的vue应用。我们会使用vue cli 3.0 来创建一个vue项目，并从选项中选择路由和vuex。

执行下面的命令开始创建:

$ vue create vue-auth

按照对话框的提示，添加必要的信息，并选择我们需要的选项，完成安装。

下一步, 安装axios:

$ npm install axios --save 

配置Axios

我们在许多组件中都需要用到axios。让我们在全局整体来配置它，这样当我们需要它的时候，不用每次都去引入。

打开 ./src/main.js 文件，并且添加下面:

[...]import store from './store'import Axios from 'axios' Vue.prototype.$http = Axios;const token = localStorage.getItem('token')if (token) { Vue.prototype.$http.defaults.headers.common['Authorization'] = token}[...]

现在，当我们想在组件内使用axios时, 我们可以用this.$http ，这样相当于直接是axios。我们也可以在axios头部给自己的token, 设置身份验证，这样如果token是必需的，我们的请求将处于控制中。在这种方式下，当我们想要发送请求时，任何时候都不用设置token。

相关课程: Vue创建一个网上商店

完成之后，让我们使用服务器来处理身份验证。

创建身份验证服务

我已经写过关于这个，在我解释如何用vue-router来解决身份验证时。仔细看看Setup Node.js Server 这个章节。

创建组件

登录组件

创建Login.vue 在 ./src/components 目录下。 之后, 给登录页面添加模板:

<template> <div> <form class="login" @submit.prevent="login">  <h1>Sign in</h1>  <label>Email</label>  <input required v-model="email" type="email" placeholder="Name"/>  <label>Password</label>  <input required v-model="password" type="password" placeholder="Password"/>  <hr/>  <button type="submit">Login</button> </form> </div></template>

当你做完之后, 添加data属性，将其绑定到HTML表单中：

[...]<script> export default { data(){  return {  email : "",  password : ""  } }, }</script>

现在, 让我们给登录添加方法：