有時候急著學更多新知識會把最基礎的遺忘，以前使用PHP那會還知道表單序列化，最近通過form獲取裡面所有name屬性對應的控制元件值卻把document.getElementById('表單Id').serializeArray()給遺忘了，通過遍歷name屬性去獲取表單控制元件值-----勿忘初心

需求：之前專案大都是後臺進行最後的登入接入，現在用了vue需要前端自己通過實現登入頁面，以部落格登入為例，登入前介面如下:

進入首頁頭部如下

點選登陸進入後臺給的連結登入頁（注意這裡是後臺給了登陸頁面不是前端自己製作）

登入後獲取使用者名稱進行顯示

主要知識：vue-Router + vuex+介面獲取

（1）使用vuex在store倉庫中儲存一個表示login的state變數，userInfo變數標誌使用者資訊，使用vuecli的一般是在store.js中宣告

const state = {
	userInfo:{"username":''},//其他使用者屬性可在這裡初始化
	login: false//預設還沒登入
}

（2）header.vue檔案html程式碼段

第一次進入頁面載入header的時候先進行一次判斷，判斷使用者是否已經登入，如果已經登入則將頭部使用者資訊展示，否則直接顯示登入按鈕

如何判斷使用者是否已經登入？由於登入頁面並不是前端自己製作，因此就需要後臺給個介面告訴前端使用者是否已經登入，前端進行判斷，因此這個介面就是後臺所給的可以判斷使用者是不是已經登入的介面，並且介面最好是返回一個status狀態值，如果已經登入並將使用者資訊返回~（header作為公共頭部是一進來就載入，因此此處介面呼叫了一次）；退出登入只需將login值設定為false即可直接退出登入，監聽使用者是否登入此處使用計算屬性返回login變數進行監聽

<template>
<div>
<div v-show="isLogin">
{{userInfo.username}}
<div @click="loginout" style="cursor:pointer;">退出登入</div>
</div>
<div @click="login" style="cursor:pointer;" v-show="!isLogin">登入</div>
</div>
</template>
<script>
	export default {
		data() {
			return {
				
			}
		},
		computed: {
			isLogin(){
				return this.$store.getters.getLogin
			},
            loginout(){
               this.$store.state.login = false;window.location.href="登入連結";
            }
		},
		methods:{
			login(){
				window.location.href="登入連結";	
			}
		},
		mounted(){
			this.fetch({
				url:'後臺給的判斷使用者是否已經登入介面',
				method:'post'
			}).then(res=>{
				if(res.status==200){
					this.$store.state.login = true;//如果已經登入將變數login設定為true
					this.$store.state.userInfo= res.data;//將後臺登入後用戶資訊給userInfo
				}
			})
		}
	}

</script>
 

（2）處理完剛進入頁面的情況，接著便是每一個路由進入要如何處理，由於'/home’路由為進入頁面，無論登入還是沒登入都可以顯示，因此對'/home'路由不進行處理，其他路由遍歷統一控制，使用vue-router,beforEach鉤子函式，在遍歷之前先用vuex寫一個mutations函式對路由進行處理，思路是，對每個路由請求後臺所給的判斷使用者是否已經登入的介面，如果已經登入，則跳轉到當前路由，如果未登入，則跳轉到登入頁面連結進行登入，mutations如下：(store.js)

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios';
const mutations = {
    	updateUserinfo(state, to) {
		axios.post('判斷使用者是否已經登入介面').then((res) => {
			if(res.data.status==200){
                //已經登入，login設定為true，跳轉到當前路由
				state.userInfo = res.data.data;
				state.login = true;
				router.push(to);
			}else{
                //未登入，跳轉到登入頁面
				toast['error']({
					msg: res.data.statustext,
					timeout: 3000
				});
				window.location.href = "後臺所給登入頁面連結";
			}
		}).catch((err) => {
			console.log("err",err);
			toast['error']({
				msg: '獲取使用者資訊失敗！',
				timeout: 3000
			});
				window.location.href = "後臺所給登入頁面連結";
		})
	}
}

（3）最後一步，路由遍歷（index.js)

router.beforeEach((to, from, next) => { //切換網頁標題
//to要跳轉過去的路由，from當前要離開的路由，next進行頁面跳轉必須呼叫，否則不會跳轉到下一個路由
	if(!store.state.login&&to.path!='/home'){
    //還沒登入並且當前頁面不是首頁（首頁已經在第一步進行了處理）
			store.commit('updateUserinfo',to);//呼叫mutation路由處理函式
	}else{
        //已經登入了，如果路由匹配不上，跳轉到404錯誤元件頁面（該元件自己編寫^_^）
		if(to.matched.length===0){
			next({path:'/404'});//轉至404
		}else{
         //正確路由，next()進入到要跳轉路由
			document.title = '';//設定進入頁面title
			next();
		}
	}
});

總結：

一個介面：後臺給出如getUserInfo介面，該介面返回使用者是否已經登入，基本介面返回如下res{status:200,data:{username:'xxxx','images':'xxx'}}

Vue-Router:router.beforeEach()鉤子函式

Vuex:儲存判斷使用者登入資訊{login:false，userInfo:{username:''}}

（最後，發現該方法存留一個不容易發現的bug，當重新整理當前頁面點選瀏覽器的回到上一步（即返回鍵）時，會跳轉不過去。。。這是為什麼呢。。。）