SNCTF-theme/src/components/Navbar.vue

<template>
  <div class="wrapper">
    <!-- 页面头部部分 -->
    <div class="header">
      <div class="logo">SNCTF</div>
      <!-- 水平一级菜单 -->
      <div style="float:left;">
        <el-menu
            router
            :default-active="$route.path"
            class="el-menu-demo"
            mode="horizontal"
            text-color="#2c3e50"
            active-text-color="#f39c12">
          <!--background-color="#2d3039"-->
          <el-menu-item index="/home">Home</el-menu-item>
          <el-menu-item index="/scoreboard">Scoreboard</el-menu-item>
          <el-menu-item index="/users">Users</el-menu-item>
          <el-menu-item index="/notification">Notification</el-menu-item>
          <el-menu-item index="/challenges">Challenges</el-menu-item>
        </el-menu>
      </div>
      <div class="header-right">
        <div v-if="username!=''" class='right'>
          <div class="userinfo">
            <el-dropdown class="user-name" trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link" style="font-size: larger">
                      {{ username }}
                        <i class="el-icon-caret-bottom"></i>
                    </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="$router.push('/info')">个人信息</el-dropdown-item>
                  <el-dropdown-item disabled>修改密码</el-dropdown-item>
                  <el-dropdown-item v-if="this.role == 1" @click="$router.push('/admin')">后台管理</el-dropdown-item>
                </el-dropdown-menu>
              </template>

            </el-dropdown>
          </div>

          <div class="slip">
            <p class="slip">|</p>
          </div>
          <div class="logout">
            <el-button text color="#ffd04b" :dark="isDark" @click="logout">退出登录</el-button>
          </div>
        </div>
        <div v-else class="login">
          <el-button type="primary" class="login" @click="login">登录/注册</el-button>
        </div>

      </div>
    </div>
  </div>
  <!--  <el-menu-->
  <!--      router-->
  <!--      :default-active="$route.path"-->
  <!--      class="el-menu-demo"-->
  <!--      mode="horizontal"-->
  <!--      background-color="#2d3039"-->
  <!--      text-color="#fff"-->
  <!--      active-text-color="#ffd04b"-->

  <!--  >-->
  <!--    <el-menu-item index="0">-->
  <!--      <a href="/home"><img style = "height:50px;width:auto" src="../assets/logo.png" alt="logo"></a>-->
  <!--    </el-menu-item>-->

  <!--    <el-menu-item index="/home">Home</el-menu-item>-->
  <!--    <el-menu-item index="/scoreboard">Scoreboard</el-menu-item>-->
  <!--    <el-menu-item index="/users">Users</el-menu-item>-->
  <!--    <el-menu-item index="/notification">Notification</el-menu-item>-->
  <!--    <el-menu-item index="/challenges">Challenges</el-menu-item>-->


  <!--    <div v-if="username!=''" class="right">-->
  <!--      <el-sub-menu index="/profile" class="profile" >-->
  <!--        <template #title>{{ username }}</template>-->
  <!--        <el-menu-item index="/edit">修改资料</el-menu-item>-->
  <!--      </el-sub-menu>-->
  <!--      <p>|</p>-->
  <!--      <el-menu-item @click="logout()">Challenges</el-menu-item>-->
  <!--    </div>-->

  <!--    <el-button v-else type="primary" class="login" @click="login">登录/注册</el-button>-->



  <!--  </el-menu>-->

</template>

<script>
import Login from "../components/Login.vue";
import axios from "axios";
import {ElNotification} from "element-plus";

export default {
  data(){
    return{
      username : '',
      role:0,
    }
  },

  mounted(){
    axios.get("/api/v1/user/session").then(res => {
      if (res.data.code === 200) {
        this.username = res.data.data.username;
        this.role = res.data.data.role;
        //反正Navbar每次都要请求，直接在这请求session，然后写入cookie就好了
        localStorage.setItem('token',res.data.data.token);

      }
      //请求不到就删除token，防止变量出现还有遗留的情况，非常号解决方案
    }).catch(err => {localStorage.removeItem('token');});
  },


  methods:{
    logout(){
      axios.get("/api/v1/logout").then(res => {
        if (res.data.code === 200) {
          ElNotification({
            title: '退出成功',
            message: '已成功退出',
            type: 'success',
            duration: 3000,
          });
          if(this.$route.path === '/') {
            window.location.reload()
          } else {
            this.$router.push('/login')
        }
        }
      })
    },



    login(){
      this.$router.push('/login')
    }
  }
}
</script>


<style lang="less" scoped>


.wrapper {
  width: 100%;
  height: 100%;
  //background: #2d3039;
}
.header {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 70px;
  font-size: 22px;
}
.header .logo {
  float: left;
  margin-left: 60px;
  margin-top: 17.5px;
  height: 29px;
  width: 120px;
  vertical-align: middle;
  color: #2c3e50;
}
.header-right {
  float: right;
  padding-right: 50px;
  height: 70px;
  .right {
    display: flex;
    align-items: center;
    transform:translateY(-10%);
    .userinfo{
      display: flex;
      align-items: center;
      margin-right: 20px;

      .user-name{
        margin-right: 10px;
        color: #2c3e50;
      }
    }
    .slip{
      display: flex;
      align-items: center;
    }
    .logout{
      display: flex;
      align-items: center;
      margin-left: 20px;
    }

  }
  .login{
    transform:translateY(20%);
    display: flex;
    align-items: center;
  }
}
.el-dropdown-link {
  cursor: pointer;
}
.el-dropdown-menu__item {
  text-align: center;
}


.el-menu.el-menu--horizontal {
  border-bottom: none !important;
  float: left;
  margin-left: 50px;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid #ffd04b;
  color: #ffd04b;
  font-weight: 700;
}
.el-menu--horizontal > .el-menu-item {
  font-size: 16px;
  margin: 0 15px;
  //color: white;
}



</style>