11.24 Vue實戰——vue+router+vuex導航守衛進行身份驗證技术頭條網

上文說到了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: '/' })
 }
 }
}