vue项目后台给登录页面如何接入？一个接口+Vue-Router+Vuex简简单单实现登录

有时候急着学更多新知识会把最基础的遗忘，以前使用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，当刷新当前页面点击浏览器的回到上一步（即返回键）时，会跳转不过去。。。这是为什么呢。。。）