传统方式中，许多人使用本地存储，来管理通过客户端验证生成的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来解决身份验证时。仔细看看 这个章节。
创建组件
登录组件
创建Login.vue 在 ./src/components 目录下。 之后, 给登录页面添加模板:
<template>
<div>
<form @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>
现在, 让我们给登录添加方法：
[...]
<script>
export default {
[...]
methods: {
login: function () {
let email = this.email
let password = this.password
this.$store.dispatch('login', { email, password })
.then(() => this.$router.push('https://www.jb51.net/'))
.catch(err => console.log(err))
}
}
}
</script>
我们正在使用vuex的action — login 来解决身份验证。我们可以在将actions细化到回调里面，这样就可以在自己的组件里面做一些很酷的事情了。
注册组件
跟login组件类似，那我们给注册用户弄一个了。在组件目录里面创建Register.vue ，并将下面的添加进去：
<template> <div> <h4>Register</h4> <form @submit.prevent="register"> <label for="name">Name</label> <div> <input type="text" v-model="name" required autofocus> </div> <label for="email" >E-Mail Address</label> <div> <input type="email" v-model="email" required> </div> <label for="password">Password</label> <div> <input type="password" v-model="password" required> </div> <label for="password-confirm">Confirm Password</label> <div> <input type="password" v-model="password_confirmation" required> </div> <div> <button type="submit">Register</button> </div> </form> </div> </template>
让我们定义一下这些将绑定到表单里面的data属性:
[...] <script> export default { data(){ return { name : "", email : "", password : "", password_confirmation : "", is_admin : null } }, } </script>
现在，让我们添加方法进去：
[...] <script> export default { [...] methods: { register: function () { let data = { name: this.name, email: this.email, password: this.password, is_admin: this.is_admin } this.$store.dispatch('register', data) .then(() => this.$router.push('https://www.jb51.net/')) .catch(err => console.log(err)) } } } </script>
安全组件
让我们创建一个普通的组件，它在用户通过验证后会显示。文件命名为Secure.vue，并添加下面的进去：
<template> <div> <h1>This page is protected by auth</h1> </div> </template>
更新App组件
打开./src/App.vue 文件，并添加下面的进去: