退出登录：

BaseHeader:

logout(){this.$store.dispatch("logout").then((res)=>{this.$router.push({path:"/login"});this.$message({message:"已退出账户，请重新登录",type:"success",showClose:true});}).catch((error)=>{this.$message({message:error,type:"error",showClose:true});})},

store的logout：

        logout({commit}){return new Promise((resolve, reject) =>{logout().then(res =>{if(res.data.success){commit('SET_TOKEN', '');commit('SET_ACCOUNT', '');commit('SET_NAME', '');commit('SET_AVATAR', '');commit('SET_ID', '');localStorage.removeItem('token');resolve();}}).catch(error =>{reject(error);})})}

登录：

Login.vue：

<template><div class="register"><img :src="imgSrc" width="100%" height="100%" alt="" /><div class="registerPart" v-title data-title="用户登录"><!--<video preload="auto" class="my-video-player" autoplay="autoplay" loop="loop"><source src="../../static/vedio/sea.mp4" type="video/mp4"></video>--><h1>用户登录</h1><el-form ref="userForm" :model="userForm" :rules="rules"><el-form-item prop="account" class="inputElement"><el-input placeholder="用户名" v-model="userForm.account"></el-input></el-form-item><el-form-item prop="password" class="inputElement"><el-input placeholder="密码" type="password" v-model="userForm.password"></el-input></el-form-item><el-form-item class="my-login-button"><el-button type="primary" plain @click.native.prevent="login('userForm')">登录</el-button></el-form-item></el-form></div></div>
</template><script>export default{name:"Login",data(){return {imgSrc:require('../assets/img/scene.jpg'),userForm:{account:"",password:"",},rules: {account:[{ required: true, message: '请输入账号名称', trigger: 'blur' },{ max: 10, message: '不能大于10个字符！', trigger: 'blur' }],password:[{required: true, message: '请输入密码', trigger: 'blur'},{min: 6 ,max: 10, message: '密码不能小于6个字符,大于10个字符', trigger: 'blur'}]},}},methods:{login(formName){this.$refs[formName].validate((valid) =>{if (valid){this.$store.dispatch("login",this.userForm).then(() =>{this.$router.push({path:"/"});this.$message({message:"登录成功!",type:"success",showClose:true});}).catch((error) =>{if (error !== 'error'){this.$message({message: error, type: 'error', showClose: true});}})} else {return false;}});}}}
</script><style scoped>.register{width:100%;height:100%;}.registerPart{position:absolute;/*定位方式绝对定位absolute*/top:50%;left:50%;/*顶和高同时设置50%实现的是同时水平垂直居中效果*/transform:translate(-50%,-50%);/*实现块元素百分比下居中*/width:450px;padding:50px;background: rgba(224, 224 ,224,.5);/*背景颜色为黑色，透明度为0.8*/box-sizing:border-box;/*box-sizing设置盒子模型的解析模式为怪异盒模型，将border和padding划归到width范围内*/box-shadow: 0px 15px 25px rgba(0,0,0,.5);/*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/border-radius:15px;/*边框圆角，四个角均为15px*/}.registerPart h1{margin:0 0 30px;padding:0;color: #fff;text-align:center;/*文字居中*/}.registerPart .inputElement input{width: 100%;padding:10px 0;font-size:16px;color:#fff;letter-spacing: 1px;/*字符间的间距1px*/margin-bottom: 30px;border:none;border-bottom: 1px solid #fff;outline:none;/*outline用于绘制元素周围的线outline：none在这里用途是将输入框的边框的线条使其消失*/background: transparent;/*背景颜色为透明*/}.my-login-button{color: #00BFFF !important;text-align: center;}.my-login-button button{width: 100%;}</style>

store:

 login({commit},user){return new Promise((resolve, reject) =>{login(user).then(res =>{if(res.data.success){commit("SET_TOKEN",res.data.data);localStorage.token = res.data.data;resolve();}}).catch(error =>{reject(error);})})}

js：

/***  登录*/
export function login(data)
{return request({url:"/login",method:'POST',data})
}

记得在router加上登录的路由：

{path: '/login',component: r => require.ensure([], () => r(require('@/views/Login')), 'Login')},