上文说到了vuex的状态管理集成，本文将分享，news-list项目中添加登录页面，并如何利用之前说的导航守卫，状态管理进行访问身份验证。本项目代码git地址：
https://gitee.com/vuejslearn/news-list.git
首先，在views目录下增加登录页面login.vue
<template>
登录页面
/<template>
然后，修改路由文件。
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实战系列的文档，喜欢的朋友欢迎关注。