添加退出登录功能

web-vue/src/pages/layout/index.vue

@@ -13,23 +13,23 @@
           :type="collapsed ? 'menu-unfold' : 'menu-fold'"
           @click="() => (collapsed = !collapsed)"
         />
-        <span>{{ getUserName }}</span>
+        <top-header />
       </a-layout-header>
       <a-layout-content
         :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
       >
         Content
-        {{ getToken }}
       </a-layout-content>
     </a-layout>
   </a-layout>
 </template>
 <script>
-import { mapGetters } from 'vuex';
 import SideMenu from './side-menu';
+import TopHeader from './top-header';
 export default {
   components: {
-    SideMenu
+    SideMenu,
+    TopHeader
   },
   data() {
     return {
@@ -37,10 +37,6 @@ export default {
     }
   },
   computed: {
-    ...mapGetters([
-      'getToken',
-      'getUserName'
-    ])
   }
 }
 </script>

web-vue/src/pages/layout/top-header.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="right-header">
+    <a-dropdown>
+      <a-avatar
+        shape="square"
+        size="large"
+        :style="{ backgroundColor: '#f56a00', verticalAlign: 'middle' }">
+        <a-tooltip placement="left" :title="getUserName">
+          {{ avatarName }}
+        </a-tooltip>
+      </a-avatar>
+      <a-menu slot="overlay">
+        <a-menu-item>
+          <a href="javascript:;">修改密码</a>
+        </a-menu-item>
+        <a-menu-item>
+          <a href="javascript:;">修改昵称</a>
+        </a-menu-item>
+        <a-menu-item>
+          <a href="javascript:;">用户资料</a>
+        </a-menu-item>
+        <a-menu-item>
+          <a href="javascript:;" @click="logOut">退出登录</a>
+        </a-menu-item>
+      </a-menu>
+    </a-dropdown>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex';
+export default {
+  data() {
+    return {}
+  },
+  computed: {
+    ...mapGetters([
+      'getToken',
+      'getUserName'
+    ]),
+    avatarName() {
+      const reg = new RegExp("[\u4E00-\u9FA5]+");
+      if (reg.test(this.getUserName)) {
+        return this.getUserName.substring(0, 3);
+      } else {
+        return this.getUserName.substring(0, 4);
+      }
+    }
+  },
+  methods: {
+    // 退出登录
+    logOut() {
+      this.$confirm({
+        title: '系统提示',
+        content: '真的要退出系统么？',
+        okText: '确认',
+        cancelText: '取消',
+        onOk: () => {
+          return new Promise((resolve) => {
+            // 退出登录
+            this.$store.dispatch('logOut').then(() => {
+              this.$notification.success({
+                message: '退出登录成功',
+                duration: 2
+              });
+              this.$router.push('/login');
+              resolve();
+            })
+          })
+        }
+      });
+    }
+  }
+}
+</script>
+<style scoped>
+.right-header {
+  margin-right: 20px;
+  float: right;
+  cursor: pointer;
+}
+</style>

web-vue/src/store/modules/user.js

@@ -1,6 +1,6 @@
-// const USER_NAME_KEY = 'Jpom-UserName';
-// const TOKEN_KEY = 'Jpom-Token';
-// const MENU_KEY = 'Jpom-Menus';
+/**
+ * 用户相关的 store
+ */
 import {
   USER_NAME_KEY,
   TOKEN_KEY,
@@ -43,6 +43,18 @@ const user = {
           reject(error)
         })
       })
+    },
+    // 退出登录 移除对应的 store
+    logOut({commit}) {
+      return new Promise((resolve) => {
+        commit('setToken', '');
+        commit('setUserName', '');
+        commit('setMenus', '');
+        localStorage.removeItem(TOKEN_KEY);
+        localStorage.removeItem(USER_NAME_KEY);
+        localStorage.removeItem(MENU_KEY);
+        resolve();
+      })
     }
   },
   getters: {