router中获取vuex_Vue实战——vue+router+vuex导航守卫进行身份验证

上文说到了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实战系列的文档，喜欢的朋友欢迎关注。