首页退出

src/assets/icons/svg/z_home.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1687313313952" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7881" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M975.7 33.9H48.3C20.6 33.9 2 53.4 2 82.6v731.2c0 29.3 18.5 48.8 46.3 48.8h927.3c27.8 0 46.3-19.5 46.3-48.8V82.6c0.1-29.3-18.4-48.7-46.2-48.7z m-17.4 765H65.8V97.6h892.5v701.3zM781.7 926.4H242.3c-29.5 0-49.1 12.8-49.1 31.9s19.6 31.9 49.1 31.9h539.3c29.5 0 49.1-12.8 49.1-31.9s-19.6-31.9-49-31.9z" p-id="7882"></path></svg>
\ No newline at end of file

src/layout/components/Navbar.vue

@@ -6,6 +6,9 @@
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
+        <el-tooltip content="跳转到前台首页" effect="dark" placement="bottom">
+          <svg-icon icon-class="z_home" class="right-menu-item hover-effect img-svg" @click="goHome" />
+        </el-tooltip>
         <el-tooltip content="全屏" effect="dark" placement="bottom">
           <screenfull id="screenfull" class="right-menu-item hover-effect" />
         </el-tooltip>
@@ -77,6 +80,10 @@ export default {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
     },
+    goHome() {
+      window.open('/home')
+      location.reload()
+    },
     open() {
       this.$confirm('确定注销并退出系统吗？', '提示', {
         confirmButtonText: '确定',
@@ -158,5 +165,14 @@ export default {
       span{display:block;max-width:55px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-wrap:normal;}
     }
   }
+
+  .img-svg {
+    display: inline-block;
+    cursor: pointer;
+    fill: #5a5e66;;
+    width: 36px;
+    height: 36px;
+    vertical-align: 10px;
+  }
 }
 </style>

src/router/index.js

@@ -18,8 +18,13 @@ router.beforeEach((to, from, next) => {
   }
   NProgress.start()
   if (getToken()) {
-    // 已登录且要跳转的页面是登录页
-    if (to.path === '/login') {
+    if (to.path === '/') { // 根路由重定向到前台home页
+      next('/home')
+      NProgress.done()
+    } else if (to.path === '/login') { // 已登录且要跳转的页面是登录页
+      next({ path: '/home' })
+      NProgress.done()
+    } else if (to.path === '/backlogin') { // 已登录且要跳转的页面是后台登录页
       next({ path: '/backstage/dashboard' })
       NProgress.done()
     } else {

src/views/homepage/components/userLogin.vue

 <template>
   <div class="user-login-box">
-    <div v-if="!userObj" class="not-login" @click="login">注册/登录</div>
+    <div v-if="!user.id" class="not-login" @click="login">注册/登录</div>
+    <el-dropdown v-else class="avatar-container right-menu-item hover-effect" trigger="click">
+      <div class="avatar-wrapper">
+        <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar">
+        <span>{{ user.username }}</span>
+        <i class="el-icon-caret-bottom" />
+      </div>
+      <el-dropdown-menu slot="dropdown">
+        <router-link to="/home">
+          <el-dropdown-item>
+            个人中心
+          </el-dropdown-item>
+        </router-link>
+        <span style="display:block;" @click="open">
+          <el-dropdown-item divided>
+            退出登录
+          </el-dropdown-item>
+        </span>
+      </el-dropdown-menu>
+    </el-dropdown>
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex'
+import Avatar from '@/assets/images/avatar.png'
+
 export default {
   data() {
     return {
-      userObj: null,
-      activatedMenu: null
+      Avatar: Avatar
     }
   },
+  computed: {
+    ...mapGetters([
+      'user',
+      'baseApi'
+    ])
+  },
   mounted() {
     this.$nextTick(() => {
-
+      console.log(this.user)
     })
   },
   methods: {
     login(item) {
-
+      this.$router.push({ path: item.url || '/login' })
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload()
+      })
+    },
+    open() {
+      this.$confirm('确定注销并退出系统吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.logout()
+      })
     }
   }
 }
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
+.avatar-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-right: 15px;
+  color: #ffffff;
+  font-size: 15px;
+  &:before {
+    position: absolute;
+    right: 0;
+    height: auto;
+    width: 12px;
+  }
+  img {
+    height: 26px;
+    width: 26px;
+    border-radius: 4px;
+    margin-right: 4px;
+    border: 0;
+  }
+  span {
+    display: block;
+    max-width: 55px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-wrap: normal;
+    opacity: 0.8;
+  }
+  span:hover {
+    opacity: 1;
+  }
+}
+
 .user-login-box {
   padding: 1px 15px 1px;
   font-size: 20px;
@@ -31,11 +106,13 @@ export default {
   font-weight: 400;
   color: #FFFFFF;
   line-height: 48px;
-  opacity: 0.6;
   cursor:pointer;
   user-select: none;
 }
-.user-login-box:hover {
+.not-login {
+  opacity: 0.6;
+}
+.not-login:hover {
   opacity: 0.85;
 }
 </style>

src/views/homepage/components/userLoginV2.vue

 <template>
   <div class="user-login-box">
-    <div v-if="!userObj" class="not-login" @click="login">注册/登录</div>
+    <div v-if="!user.id" class="not-login" @click="login">注册/登录</div>
+    <el-dropdown v-else class="avatar-container right-menu-item hover-effect" trigger="click">
+      <div class="avatar-wrapper">
+        <img :src="user.avatarName ? baseApi + '/avatar/' + user.avatarName : Avatar" class="user-avatar">
+        <span>{{ user.username }}</span>
+        <i class="el-icon-caret-bottom" />
+      </div>
+      <el-dropdown-menu slot="dropdown">
+        <router-link to="/home">
+          <el-dropdown-item>
+            个人中心
+          </el-dropdown-item>
+        </router-link>
+        <span style="display:block;" @click="open">
+          <el-dropdown-item divided>
+            退出登录
+          </el-dropdown-item>
+        </span>
+      </el-dropdown-menu>
+    </el-dropdown>
   </div>
 </template>
 <script>
+import { mapGetters } from 'vuex'
+import Avatar from '@/assets/images/avatar.png'
+
 export default {
   data() {
     return {
-      userObj: null,
-      activatedMenu: null
+      Avatar: Avatar
     }
   },
+  computed: {
+    ...mapGetters([
+      'user',
+      'baseApi'
+    ])
+  },
   mounted() {
     this.$nextTick(() => {
-
+      console.log(this.user)
     })
   },
   methods: {
     login(item) {
-
+      this.$router.push({ path: item.url || '/login' })
+    },
+    logout() {
+      this.$store.dispatch('LogOut').then(() => {
+        location.reload()
+      })
+    },
+    open() {
+      this.$confirm('确定注销并退出系统吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.logout()
+      })
     }
   }
 }
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
+.avatar-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-right: 15px;
+  color: #000;
+  font-size: 15px;
+  &:before {
+    position: absolute;
+    right: 0;
+    height: auto;
+    width: 12px;
+  }
+  img {
+    height: 26px;
+    width: 26px;
+    border-radius: 4px;
+    margin-right: 4px;
+    border: 0;
+  }
+  span {
+    display: block;
+    max-width: 55px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-wrap: normal;
+    opacity: 0.8;
+  }
+  span:hover {
+    opacity: 1;
+  }
+}
+
 .user-login-box {
   padding: 1px 15px 1px;
   font-size: 20px;
@@ -31,11 +106,13 @@ export default {
   font-weight: 400;
   color: #000;
   line-height: 48px;
-  opacity: 0.6;
   cursor:pointer;
   user-select: none;
 }
-.user-login-box:hover {
+.not-login {
+  opacity: 0.6;
+}
+.not-login:hover {
   opacity: 0.85;
 }
 </style>