一.在main.js使用導(dǎo)航守衛(wèi)(router.beforeEach)進(jìn)行身份驗(yàn)證

導(dǎo)航守衛(wèi)相關(guān)介紹
添加代碼如下:

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()
  }
})

上述代碼主要是進(jìn)行一個(gè)登錄狀態(tài)的驗(yàn)證,如果當(dāng)前的用戶未進(jìn)行登錄,將會(huì)被轉(zhuǎn)接至登錄頁(yè)

整段main.js代碼如圖

二.在components文件夾下新建一個(gè)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="請(qǐng)輸入賬號(hào)">
            <template  slot="prepend">賬號(hào)</template>
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-input id="password" v-model="password" placeholder="請(qǐng)輸入密碼" 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 : '賬號(hào)或密碼不能為空！',
          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>

三.運(yùn)行

打開(kāi)cmd , cd 到本項(xiàng)目的根目錄下 , 執(zhí)行**npm run dev **
我是在git bash中打開(kāi)的 , 效果一樣的.

git bash 運(yùn)行結(jié)果

運(yùn)行效果如圖

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