Vue练手项目(四):登录页

一.在main.js使用导航守卫(router.beforeEach)进行身份验证

导航守卫相关介绍
添加代码如下:

router.beforeEach((to, from, next) => {
  if (to.path == '/login') {
    sessionStorage.removeItem('user');
  }
  let user = sessionStorage.getItem('user');
  if (!user && to.path != '/login') {
    next({ path: '/login' })
  } else {
    next()
  }
})

上述代码主要是进行一个登录状态的验证,如果当前的用户未进行登录,将会被转接至登录页

整段main.js代码如图

二.在components文件夹下新建一个Login.vue文件,如下图:

新建Login.vue
Login.vue的代码如下:

<template>
  <div class="login-box">
    <div style="margin-top:20%;margin-left:40%;width:100%;height:100%">
      <el-row>
        <el-col :span="8">
          <el-input id="name" v-model="name" placeholder="请输入账号">
            <template  slot="prepend">账号</template>
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-input id="password" v-model="password" placeholder="请输入密码" type="password">
            <template  slot="prepend">密码</template>
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-button id="login" v-on:click="check" style="width:100%;" type="primary">登录</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      name:"",
      password:"",

    }
  },
  methods:{
    // 登录
    check(){
      if(this.name==""||this.password==""){
        this.$message({
          message : '账号或密码不能为空！',
          type : 'error'
        })
      }else{
        $.ajax({
                    url : 'login',
                    type : 'post',
                    data : {
                        name : name,
                        password : password
                    },
                    success : function(data) {
                        var result = data.result;
                        if(result == 'true' || result == true){
                            alert("登录成功");
                        }else {
                            alert("登录失败");
                        }
                    },
                    error : function(data) {
                        alert(data);
                    },
                    dataType : 'json',
                })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .login-box {
    background-image:url(../assets/login_bg.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    height: 100%;
    position: fixed;
    width: 100%;
    margin-top: 0px;
    display: flex
    }
</style>

三.运行

打开cmd , cd 到本项目的根目录下 , 执行**npm run dev **
我是在git bash中打开的 , 效果一样的.

git bash 运行结果
打开浏览器,输入localhost:8686,查看运行效果
运行效果如图
github项目最近更改了 , 晚点再重新发布上去

In order to be irreplaceable , one must always be different.
要做到不可替代 , 就要与众不同.