Vue实战——vue+router+vuex导航守卫进行身份验证

上文说到了vuex的状态管理集成，本文将分享，news-list项目中添加登录页面，并如何利用之前说的导航守卫，状态管理进行访问身份验证。本项目代码git地址：

https://gitee.com/vuejslearn/news-list.git

首先，在views目录下增加登录页面login.vue

<template>
 <div>
 登录页面
 </div>
</template>

<script>
 export default {
 name: 'login',
 mounted: () => {
 console.log('dd')
 },
 computed: {
 }
}
</script>

<style>
</style>

然后，修改路由文件。

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
 }

然后在页面上显示出来

<div>
 登录页面
 {{logined}}
 </div>

ok，启动项目访问http://localhost:8001/dev，发现直接跳转到了登录页，并且显示为false，未登录。

我们修改首页的身份验证为false也就是将router里‘/’路径的meta里的requiresAuth改成false。重启项目访问http://localhost:8001/dev，发现首页显示出来了。

然后我们点击另外两个导航项，均跳转到了登录页。至此，身份验证已经算是集成进来了。那么如何通过用户登录来改变状态呢？

我们修改登录页，添加用户名、密码、登录按钮等基本dom元素。

<input type="text" placeholder="请输入用户名" v-model="username"/>
<input type="password" placeholder="请输入密码" v-model="password"/>
<input type="button" value="登录" @click="login"/>

添加相关属性、方法

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