傳統方式中，許多人使用本地存儲，來管理通過客戶端驗證生成的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>

現在, 讓我們給登錄添加方法：