layout

src/service/UserManagementService/index.ts

@@ -44,7 +44,7 @@ export default class UserService {
    */
   logout() {
     return baseAxios({
-      url: '/login',
+      url: '/logout',
       method: 'get',
     })
   }

src/views/Root/index.vue

 <template>
   <div>
     <a-layout id="components-layout-demo-fixed-sider">
-      <a-layout-header> sdlkfj </a-layout-header>
+      <a-layout-header>
+        <div class="flex justify-between items-center h-full">
+          <div class="text-center text-lg my-3">中小企业协会综合服务平台</div>
+          <div>
+            <!-- <a-popover> -->
+              <!-- <template slot="content">
+                <p>退出账户</p>
+              </template> -->
+              <div class="flex justify-between items-center">
+                <img class="w-5 h-7 mr-3" src="@/assets/images/avatar.png" alt="头像">
+                {{ phone }}
+                <span class="inline-block ml-3 cursor-pointer" @click="logout">退出</span>
+              </div>
+            <!-- </a-popover> -->
+          </div>
+        </div>
+      </a-layout-header>
       <a-layout style="min-height: 100vh">
         <a-layout-sider width="256" style="background: white">
-          <div class="text-center text-lg my-3">中小企业协会综合服务平台</div>
           <a-menu
             style="width: 256px"
             :open-keys.sync="openKeys"
@@ -60,11 +75,14 @@ import { iMenuItem, iMenuList } from "./types";
 import { Fragment } from "vue-fragment";
 import { getUserMsg } from "@/utils/userMsg/userMsg";
 import { getOldRoleFromUserMsg } from "@/utils/user";
+import UserService from '@/service/UserManagementService'
 
 Vue.use(Menu);
 Vue.use(Icon);
 Vue.use(Layout);
 
+const userService = new UserService()
+
 export default Vue.extend({
   components: {
     Fragment,
@@ -94,6 +112,9 @@ export default Vue.extend({
     selectedKeys(): Array<String> {
       return [(this.$route.meta as { selectedName: string }).selectedName];
     },
+    phone() {
+      return JSON.parse(window.localStorage.getItem('USER_MSG') as any).phone
+    }
   },
   methods: {
     getMenuChildren(menu: iMenuItem) {
@@ -122,6 +143,14 @@ export default Vue.extend({
     hasChildren(menu: iMenuItem) {
       return menu.children && menu.children.length !== 0;
     },
+    logout() {
+      userService.logout().then(res => {
+        if (res.code === 200) {
+          window.localStorage.clear()
+          this.$router.push('/login')
+        }
+      })
+    }
   },
 });
 </script>
@@ -130,4 +159,7 @@ export default Vue.extend({
 /deep/a {
   color: #1890ff;
 }
+/deep/ .ant-layout-header {
+  background: #fff;
+}
 </style> 
\ No newline at end of file