1.判断是否登陆

• 解决已经登陆的状态下，再次访问登陆页时，直接跳转到后台中心页而无需再次登陆操作。打开 src/views/admin/login/index.vue并找到script最下端位置，如下：

 <script setup>
 
     ...... 以上代码省略......
     
 //判断是否登陆 // [!code focus]
 if (getToken()) { // [!code focus]
   //跳转到后台主页 // [!code focus]
   location.replace('/main') // [!code focus]
 } // [!code focus]
 </script>
 
 <style scoped>
     ...... 以下代码省略......
 

2.退出功能

2.1 编写退出函数

• 打开 src/components/admin/MainHeader.vue 修改文件，内容如下：

 <template>
   <div class="sub-head">
     <div class="user">
       <el-icon :size="14"><User /></el-icon> 李小三
     </div>
     <div class="quit">
       <el-icon :size="14"><Remove /></el-icon>
       <span @click="logout" style="margin-left:5px">退出</span>
     </div>
   </div>
 </template>
 
 <script setup>
   import { User, Remove } from '@element-plus/icons-vue'
   import { removeToken } from '@/utils/token-utils.js'
 
   //退出登陆
   const logout = async () => {
     removeToken()
     location.replace("/login")
   }
 
 </script>
 
 <style scoped>
 
 </style> 

3.完成控制中心页

• 打开 src/views/admin/workplace/index.vue修改内容如下：

 <template>
   <div class="welcome body_bg">
     <br />
     Mallray CMS内容管理系统，<br />
     欢迎您！
   </div>
 </template>
 
 <script setup>
 
 </script>
 
 <style scoped>
 .body_bg{
   margin:0;
   padding:0;
   background-image: url("@/assets/admin/images/user_bg.png");
   background-repeat : no-repeat ;
   background-position: right bottom;
   background-size: auto;
   height:100%;
 }
 .welcome{
   line-height: 100px;
   margin-left:250px;
   font-weight: 500;
   font-family: 'Microsoft YaHei';
   font-size:40px;
   word-spacing: 5px;
   letter-spacing: 5px;
   font-style: italic;
   color: #32A3D5;
 }
 </style>

• 将如下背景图片 user_bg.png 拷贝到 src/assets/admin/images目录下。

备注：背景图片可自行制作，这里不再上传。