这里没有调用接收，写了死数据，模拟了一个登录。

首先给在登录页面给用户名和密码写死，默认用户名是admin，密码为666666，并缓存到本地中，如果用户名或密码错误，就登录失败，并移除token。当登录成功后，页面跳转到首页，代码如下：

<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 头像区域 -->
      <div class="text-center avatar-box">
        <img src="../assets/logo.png" class="img-thumbnail avatar" alt="" />
      </div>

      <!-- 表单区域 -->
      <div class="form-login p-4">
        <!-- 登录名称 -->
        <div class="form-group form-inline">
          <label for="username">登录名称</label>
          <input
            type="text"
            class="form-control ml-2"
            id="username"
            placeholder="请输入登录名称"
            autocomplete="off"
            v-model.trim="username"
          />
        </div>
        <!-- 登录密码 -->
        <div class="form-group form-inline">
          <label for="password">登录密码</label>
          <input
            type="password"
            class="form-control ml-2"
            id="password"
            placeholder="请输入登录密码"
            v-model.trim="password"
          />
        </div>
        <!-- 登录和重置按钮 -->
        <div class="form-group form-inline d-flex justify-content-end">
          <button type="button" class="btn btn-secondary mr-2" @click="OnReset">
            重置
          </button>
          <button type="button" class="btn btn-primary" @click="OnLogin">
            登录
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyLogin",
  data(){
    return {
      username:'',
      password:''
    }
  },
  methods:{
    OnReset(){
      this.username = "";
      this.password = ""
    },
    OnLogin() {
      if( this.username === 'admin' && this.password === '666666') {
        // 登录成功
        localStorage.setItem('token','Bearer xxxx')
        this.$router.push('/home')
      } else {
        // 登录失败
        localStorage.removeItem('token')
      }
    }
  }
};
</script>

<style lang="less" scoped>
.login-container {
  background-color: #35495e;
  height: 100%;
  .login-box {
    width: 400px;
    height: 250px;
    background-color: #fff;
    border-radius: 3px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
    .form-login {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      box-sizing: border-box;
    }
  }
}

.form-control {
  flex: 1;
}

.avatar-box {
  position: absolute;
  width: 100%;
  top: -65px;
  left: 0;
  .avatar {
    width: 120px;
    height: 120px;
    border-radius: 50% !important;
    box-shadow: 0 0 6px #efefef;
  }
}
</style>

 登录成功的页面如下所示：

 但我们点击头部退出登录按钮时，能退出到登录页，且清除token，代码如下：

<template>
  <div class="layout-header-container d-flex justify-content-between align-items-center p-3">
    <!-- 左侧 logo 和 标题区域 -->
    <div class="layout-header-left d-flex align-items-center user-select-none">
      <!-- logo -->
      <img class="layout-header-left-img" src="../../assets/heima.png" alt="">
      <!-- 标题 -->
      <h4 class="layout-header-left-title ml-3">黑马后台管理系统</h4>
    </div>

    <!-- 右侧按钮区域 -->
    <div class="layout-header-right">
      <button type="button" class="btn btn-light" @click="LoginOut">退出登录</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyHeader',
  data(){
    return {
      
    }
  },
  methods:{
    LoginOut() {
      localStorage.removeItem('token');
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.layout-header-container {
  height: 60px;
  border-bottom: 1px solid #eaeaea;
}

.layout-header-left-img {
  height: 50px;
}
</style>

此时，我们这里有一个小小的Bug，就是在浏览器中输入home地址，页面会跳转到首页（home）。因此我们需要设置一个全局前置路由守卫，当地址不是home时，我们放行，是home时，我们就应该判断，是否有token，如果有token ，就放行，没有token就强制跳转到登录页；在router文件下的index.js 中代码如下：

//router文件  路由

router.beforeEach(function (to, from, next) {
    if (to.push === '/home') {
        if (token) {
            const token = localStorage.getItem('token')
            next()
        } else {
            next('/login')
        }
    } else {
        next()
    }
})