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:''}}