Sign out and control access

There is no call to receive here, dead data is written, and a login is simulated.

First, hard-code the username and password on the login page. The default username is admin and the password is 666666, and cached locally. If the username or password is incorrect, the login fails and the token is removed. When the login is successful, the page jumps to the homepage, the code is as follows:

<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>

 The page for successful login is as follows:

 But when we click the log out button in the header, we can log out to the login page and clear the token. The code is as follows:

<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>

At this time, we have a small bug here, that is, if you enter the home address in the browser, the page will jump to the home page (home). Therefore, we need to set up a global pre-routing guard. When the address is not home, we let it go. When it is home, we should judge whether there is a token. If there is a token, let it go. If there is no token, we will force the jump to the login page. The code in index.js under the router file is as follows:

//router文件  路由

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