使用Vuex解決Vue中的身份驗證

摘要： 傳統方式中，許多人使用本地儲存，來管理通過客戶端驗證生成的tokens。一個大問題是如何有更好的方式，來管理驗證tokens，從而允許我們來儲存更大的使用者資訊。 這就是Vuex 的作用。 Vuex為Vue.js 應用管理狀態.。對於應用中所有的元件來說，它被當做中央儲存...

傳統方式中，許多人使用本地儲存，來管理通過客戶端驗證生成的tokens。一個大問題是如何有更好的方式，來管理驗證tokens，從而允許我們來儲存更大的使用者資訊。

這就是ofollow,noindex" target="_blank">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>

現在, 讓我們給登入新增方法：

[...]
<script>
export default {
[...]
methods: {
login: function () {
let email = this.email 
let password = this.password
this.$store.dispatch('login', { email, password })
.then(() => this.$router.push('/'))
.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 id="name" type="text" v-model="name" required autofocus>
</div>

<label for="email" >E-Mail Address</label>
<div>
<input id="email" type="email" v-model="email" required>
</div>

<label for="password">Password</label>
<div>
<input id="password" type="password" v-model="password" required>
</div>

<label for="password-confirm">Confirm Password</label>
<div>
<input id="password-confirm" 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('/'))
.catch(err => console.log(err))
}
}
}
</script>

安全元件

讓我們建立一個普通的元件，它在使用者通過驗證後會顯示。檔案命名為Secure.vue ，並新增下面的進去：

<template>
<div>
<h1>This page is protected by auth</h1>
</div>
</template>

更新App元件

開啟./src/App.vue 檔案，並新增下面的進去:

<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link><span v-if="isLoggedIn"> | <a @click="logout">Logout</a></span>
</div>
<router-view/>
</div>
</template>

如果使用者登入進去後，你能看到關聯的Logout 了 嗎？很好。

現在，讓我們給logout新增邏輯。

<script>
export default {
computed : {
isLoggedIn : function(){ return this.$store.getters.isLoggedIn}
},
methods: {
logout: function () {
this.$store.dispatch('logout')
.then(() => {
this.$router.push('/login')
})
}
},
}
</script>

當用戶點選退出按鈕時，我們其實在做兩件事 — 計算使用者驗證的狀態和分發vuex store裡面的退出事件。在退出之後，我們利用this.$router.push('/login') ，切換使用者到login 頁面。當然你可以改變任何你想讓使用者跳轉的地方。

就是這樣了。讓我們用vuex構建許可權模組。

Vuex許可權模組

如果你讀過以前的 Setup Node.js Server **部分, 你應該注意到我們需要在本地儲存使用者許可權token，同時，當用戶被授予許可權後，我們隨時需要重新得到token以及使用者資訊。

首先, 讓我們給vuex建立store.js 檔案:

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
state: {
status: '',
token: localStorage.getItem('token') || '',
user : {}
},
mutations: {

},
actions: {

},
getters : {

}
})

如果你注意到，我們同時引入了vue,vuex和axios，之後讓vue使用vuex，這是因為它是很重要的一步。

我們已經定義了state的屬性。現在vuex的state能夠支援驗證狀態，jwt token以及使用者資訊。

建立Vuex登入事件

Vuex actions裡面主要是提交更改到vuex的store裡面。我們將建立一個login 的action，它將使用伺服器對使用者進行身份驗證，並向vuex儲存提交使用者憑據。開啟./src/store.js 檔案，並新增下面到actions物件中：

login({commit}, user){
return new Promise((resolve, reject) => {
commit('auth_request')
axios({url: 'http://localhost:3000/login', data: user, method: 'POST' })
.then(resp => {
const token = resp.data.token
const user = resp.data.user
localStorage.setItem('token', token)
axios.defaults.headers.common['Authorization'] = token
commit('auth_success', token, user)
resolve(resp)
})
.catch(err => {
commit('auth_error')
localStorage.removeItem('token')
reject(err)
})
})
},

登入action通過vuexcommit 驗證，我們將用它進行觸發更改。vuex store裡面能記錄這些更改的變化。

我們正在呼叫伺服器的登入路徑並返回必要的資料。我們在本地儲存token，之後通過auth_success 來更新儲存使用者資訊和token。在這一點上，我們也在頭部設定了axios 。

我們可以在vuex store中儲存token，但是如果使用者離開我們的應用，所有在vuex裡面的儲存都將消失。為了確保使用者在有效時間內不用再重複登入，我們只能將token進行本地儲存。

重要的是你知道這些是如何工作的，這樣你就能決定你到底想要實現什麼。

我們返回一個promise，這樣我們能在使用者登入完成後，做出響應。

建立Vuex註冊 事件

像login 事件, theregister 事件是同一種工作方式。在相同的檔案中，新增下面的到actions物件裡面:

register({commit}, user){
return new Promise((resolve, reject) => {
commit('auth_request')
axios({url: 'http://localhost:3000/register', data: user, method: 'POST' })
.then(resp => {
const token = resp.data.token
const user = resp.data.user
localStorage.setItem('token', token)
axios.defaults.headers.common['Authorization'] = token
commit('auth_success', token, user)
resolve(resp)
})
.catch(err => {
commit('auth_error', err)
localStorage.removeItem('token')
reject(err)
})
})
},

它與login 事件工作方式很像,。稱之為有共同的mutators的login 和register ，具有相同的目標——讓使用者進入系統。

建立Vuex退出 事件

我們希望使用者能夠退出系統，同時，我們希望銷燬上一次驗證的會話資料。在同一個actions 物件中，新增下面：

logout({commit}){
return new Promise((resolve, reject) => {
commit('logout')
localStorage.removeItem('token')
delete axios.defaults.headers.common['Authorization']
resolve()
})
}

現在，當用戶點選退出時，我們將移除之前在axios 頭部設定的jwt token 。他們現在將無法執行需要token的事務。

建立Mutations

像我之前提到的，mutators是被用來改變vuex store的狀態。讓我們在應用中給用過的mutators定義。在mutators物件中，新增下面的：

mutations: {
auth_request(state){
state.status = 'loading'
},
auth_success(state, token, user){
state.status = 'success'
state.token = token
state.user = user
},
auth_error(state){
state.status = 'error'
},
logout(state){
state.status = ''
state.token = ''
},
},

建立Getters

我們使用getter來獲取vuex狀態中的屬性值。在這種情況下，getter的作用是將應用程式資料與應用程式邏輯分離，並確保我們不會洩露敏感資訊。

新增下面的到getters 物件中:

getters : {
isLoggedIn: state => !!state.token,
authStatus: state => state.status,
}

你會同意我的觀點，這是一種更簡潔的訪問儲存資料的方式:relaxed:.

在Auth後面隱藏頁面

這篇文章的整個目的是實現身份驗證，讓沒有許可權的使用者看不到某些頁面。為了實現這個，我們需要知道使用者想要訪問的頁面，以及當用戶被授權時，我們有一定的方法來檢驗它。我們同時需要一定的方式，如果某些頁面，授權或者未授權的使用者可以單獨或者同時訪問的。這些都是很重要的考慮條件，幸運地是，我們可以通過vue-router來說實現。

定義路由給授權和未授權的頁面

開啟./src/router.js 檔案，並引入我們需要的這些:

import Vue from 'vue'
import Router from 'vue-router'
import store from './store.js'
import Home from './views/Home.vue'
import About from './views/About.vue'
import Login from './components/Login.vue'
import Secure from './components/Secure.vue'
import Register from './components/Register.vue'

Vue.use(Router)

正如你看到的這樣，我們已經引入vue,vue-router和我們建立的vuex。我們同時還引入了定義的所有元件，並設定vue中使用路由。

讓我們定義路由:

[...]
let router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/register',
name: 'register',
component: Register
},
{
path: '/secure',
name: 'secure',
component: Secure,
meta: { 
requiresAuth: true
}
},
{
path: '/about',
name: 'about',
component: About
}
]
})

export default router

我們路由的定義是很普遍的。對於需要許可權驗證的路由，我們需要增加額外的資料，確保當用戶訪問它時，我們可以識別它。這是新增到路由定義中的元屬性的本質。如果你想問_”我可以新增更過的資料給 元資料並使用它嗎?” ，我很堅定的告訴你，這是絕對的:grin:。

解決未授權訪問示例

我們有自己的路由定義。現在，讓我們檢驗未授權訪問並採取行動。在router.js 檔案中，新增下面的在export default router 之前：

router.beforeEach((to, from, next) => {
if(to.matched.some(record => record.meta.requiresAuth)) {
if (store.getters.isLoggedIn) {
next()
return
}
next('/login') 
} else {
next() 
}
})

從這篇文章，通過使用vue router來進行身份驗證，你可以回想一下我們這裡有一個非常複雜的機制，它變得非常大，變得非常混亂。vuex已經幫我們簡化了它，我們可以繼續給路由新增任何條件。在我們的vuex儲存中，我們可以定義操作來檢查這些條件並獲取返回它們的值。

解決Token過期示例

因為我們在本地儲存token,它可以一直保留著。這意味著無論何時，我們開啟自己的應用，它可以自動的驗證使用者，即使token已經過期失效。最多的情況是，我們的請求會因為無效token而持續失敗。這對於使用者是個不好的體驗。

現在, 開啟./src/App.vue 檔案並在script裡面，新增下面的：

export default {
[...]
created: function () {
this.$http.interceptors.response.use(undefined, function (err) {
return new Promise(function (resolve, reject) {
if (err.status === 401 && err.config && !err.config.__isRetryRequest) {
this.$store.dispatch(logout)
}
throw err;
});
});
}
}

我們截獲axios請求，已確定是否獲取到401未授權 響應。如果這麼做，我們分發logout 事件，那麼使用者獲得退出應用。這會讓使用者跳轉到之前設計的login 頁面，這樣他們可以再次登入。

我贊同這樣會提升使用者體驗 :relaxed:.

結束

從以前的文章來看，您可以看到，基於vuex的引入，我們目前的應用程式發生了重大變化。現在，我們不依賴於一直檢查token，不管到哪裡都有混亂的條件。我們可以簡單地使用vuex儲存來管理許可權，並且只需使用幾行程式碼檢查應用程式中的狀態。

我希望這可以幫助您建立更好的應用。