26.blog前端-登录、退出登录

退出登录：

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')
        },