上文說到了vuex的狀态管理內建，本文将分享，news-list項目中添加登入頁面，并如何利用之前說的導航守衛，狀态管理進行通路身份驗證。本項目代碼git位址：
https://gitee.com/vuejslearn/news-list.git
首先，在views目錄下增加登入頁面login.vue
登入頁面
然後，修改路由檔案。
1.增加登入路由：
{ path: '/login', name: 'login', beforeEnter: (to, from, next) => { console.log('login獨享的前置守衛') debugger next() }, component: () => import(/* webpackChunkName: "about" */ '../views/login.vue'), meta: { showHeader: false, requiresAuth: false }}
修改每個路由的meta，增加requiresAuth: true屬性
requiresAuth: true
當然，login的路由設定為false，因為登入頁不需要身份驗證。此屬性用來在全局前置守衛中對跳轉做限制判斷的，如果為true，意味着需要對目前使用者登入狀态做判斷，如果為false則不需要判斷。
修改vuex,在state中增加登入狀态元素
state: { logined: false }
增加mutation
login (state) { state.logined = true }
增加action
login ({ commit }) { commit('login') }
增加getters
getters: { login: state => { return state.logined } }
ok，這樣，我們就建立了一個簡單的身份驗證狀态了。之後，就是如何的使用這個狀态了。我們在
router配置頁裡，導入store
import store from '../store'
這樣，我們就可以使用store了。修改全局前置導航守衛
router.beforeEach((to, from, next) => { console.log('全局前置守衛') debugger console.log(to) console.log(from) if (to.matched.some(r => r.meta.requiresAuth)) { if (store.state.logined) { next() } else { next('/login') } } else { next() }})
通過對目标的meta，判斷是否需要進行身份驗證，如果不需要直接next。如果需要，則判斷目前狀态是否登入了，如果登入了就next，否則就跳轉到登入頁進行登入。
最後我們回過頭修改login.vue頁面，在計算屬性裡，添加logined，用來擷取登入狀态
logined () { return this.$store.getters.login }
然後在頁面上顯示出來
登入頁面 {{logined}}
ok，啟動項目通路http://localhost:8001/dev，發現直接跳轉到了登入頁，并且顯示為false，未登入。
我們修改首頁的身份驗證為false也就是将router裡‘/’路徑的meta裡的requiresAuth改成false。重新開機項目通路http://localhost:8001/dev，發現首頁顯示出來了。
然後我們點選另外兩個導航項，均跳轉到了登入頁。至此，身份驗證已經算是內建進來了。那麼如何通過使用者登入來改變狀态呢？
我們修改登入頁，添加使用者名、密碼、登入按鈕等基本dom元素。
添加相關屬性、方法
export default { name: 'login', data () { return { username: '', password: '' } }, mounted: () => { console.log('dd') }, computed: { logined () { return this.$store.getters.login } }, methods: { login () { this.$store.dispatch('login') this.$router.push({ path: '/' }) } }}
點選登入模拟登入，從背景擷取資訊，然後更改vuex狀态為登入狀态，同時導航到首頁。這時候再點選其它導航菜單，就可以正常進入了。
真正的對身份的校驗都是放到背景進行的，前台擷取到結果後，更新到狀态裡，供其他元件進行使用。
原創不容易，鑒于本人水準有限，文中如有錯誤之處歡迎大家指正。以後我會持續釋出vue實戰系列的文檔，喜歡的朋友歡迎關注。