更新后台路由

src/components/Navbar.vue

@@ -30,8 +30,9 @@
                     </span>
               <template #dropdown>
                 <el-dropdown-menu>
-                  <el-dropdown-item >个人信息</el-dropdown-item>
+                  <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>
 
@@ -99,6 +100,7 @@ export default {
   data(){
     return{
       username : '',
+      role:0,
     }
   },
 
@@ -107,9 +109,10 @@ export default {
       if (res.data.code === 200) {
         console.log(res)
         this.username = res.data.data.username;
+        this.role = res.data.data.role;
 
       }
-    })
+    }).catch(err => {});
   },
 
 

src/components/admin/admin-Navbar.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="wrapper">
+    <!-- 页面头部部分 -->
+    <div class="header">
+      <!-- 水平一级菜单 -->
+      <div style="float:left;">
+        <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="/admin/match">比赛管理</el-menu-item>
+          <el-menu-item index="/admin/notification">公告管理</el-menu-item>
+          <el-menu-item index="/admin/challenges">题目管理</el-menu-item>
+          <el-menu-item index="/admin/user">用户管理</el-menu-item>
+          <el-menu-item index="/admin/more">更多设置</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-menu>
+              </template>
+
+            </el-dropdown>
+          </div>
+
+          <div class="slip">
+            <p class="slip">|</p>
+          </div>
+          <div class="logout">
+            <el-button text color="#626aef" @click="$router.push('/home')">返回首页</el-button>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+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) {
+        console.log(res)
+        this.username = res.data.data.username;
+        this.role = res.data.data.role;
+
+      }
+    }).catch(err => {});
+  },
+
+
+  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: #dddddd;
+}
+.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: #dddddd;
+      }
+    }
+    .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>
+
+

src/components/challenges/challenges.vue

@@ -157,6 +157,18 @@ export default {
       attachment:[],
     }
   },
+  mounted() {
+    axios.get('/api/v1/user/challenges/all').catch(function (error) {
+      if (error.response.status == 400) {
+        ElNotification.error({
+          title: '错误',
+          message: '请先登录',
+          duration: 0,
+        });
+        window.location.href = '/login';
+      }
+    })
+    },
 
   methods: {
     bcard(index){

src/router/index.js

@@ -45,7 +45,12 @@ const router = createRouter({
             path:'/users',
             name:'users',
             component: users,
+        },
+        {
+            path:'/admin',
+            name:'Admin',
+            component: () => import('../views/admin/index.vue'),
         }
     ]
 })
-export default router
+export default router

src/views/admin/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <admin-navbar></admin-navbar>
+</template>
+
+<script>
+import AdminNavbar from "../../components/admin/admin-Navbar.vue";
+export default {
+  components: {AdminNavbar}
+}
+</script>
+