From 3660f01d001f6a1a2387c375aee6d2998a6e97e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=B0=B4=E8=90=BD=28YangLei=29?= <lzi.love@icloud.com>
Date: Tue, 29 Jun 2021 18:27:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=99=BB=E5=87=BA=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.js                              |  1 +
 src/api/system.js                             |  5 +++
 src/main.js                                   | 11 +----
 .../header/LayoutTopHeaderAvatar.vue          | 42 +++++--------------
 src/pages/frame/services/accountService.js    | 15 ++++---
 src/pages/frame/view/login/Login.vue          | 20 +++++----
 src/pages/user/index.vue                      |  3 ++
 src/router/config.js                          | 17 +++++++-
 src/utils/index.js                            |  3 ++
 9 files changed, 60 insertions(+), 57 deletions(-)
 create mode 100644 src/api/system.js
 create mode 100644 src/pages/user/index.vue

diff --git a/src/api/index.js b/src/api/index.js
index 752a133..18af1f5 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,5 +1,6 @@
 import { request, METHOD } from '@/utils';
 export * from './menu';
+export * from './system';
 
 export function getUserDetailInfoApi() {
     return request('/api/v1/detail', METHOD.GET);
diff --git a/src/api/system.js b/src/api/system.js
new file mode 100644
index 0000000..c2122b6
--- /dev/null
+++ b/src/api/system.js
@@ -0,0 +1,5 @@
+import { putReq } from '@/utils';
+
+export function logoutApi() {
+    return putReq('/api/v1/logout');
+}
diff --git a/src/main.js b/src/main.js
index 66f1194..1fac095 100644
--- a/src/main.js
+++ b/src/main.js
@@ -34,7 +34,7 @@ const store = new Vuex.Store({
 Vue.use(Router);
 const isAsynRount = store.state.settingModule.asyncRoutes;
 const options = initRouter(isAsynRount);
-const router = new Router({ mode: 'history', ...options });
+const router = new Router(options);
 
 //装载vue-i18n控件 如果语言优先级 请直接修改这里localeLang和fallbackLang
 Vue.use(VueI18n);
@@ -64,15 +64,6 @@ loadRoutes();
 // 加载路由守卫
 loadGuards(guards, { router, store, i18n, message: Vue.prototype.$message });
 
-// this.$notification.open({
-//     message: 'Notification Title',
-//     description:
-//         'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
-//     onClick: () => {
-//         console.log('Notification Clicked!');
-//     },
-// });
-
 loadResponseInterceptor({ router });
 
 new Vue({
diff --git a/src/pages/frame/components/header/LayoutTopHeaderAvatar.vue b/src/pages/frame/components/header/LayoutTopHeaderAvatar.vue
index bc6f922..f869acb 100644
--- a/src/pages/frame/components/header/LayoutTopHeaderAvatar.vue
+++ b/src/pages/frame/components/header/LayoutTopHeaderAvatar.vue
@@ -1,22 +1,18 @@
 <template>
     <a-dropdown>
-        <div class="header-avatar" style="cursor: pointer">
-            <a-avatar class="avatar" size="small" shape="circle" :src="user.avatar" />
-            <span class="name">{{user.name}}</span>
+        <div class="tw-inline-flex tw-cursor-pointer tw-items-center">
+            <a-avatar class="tw-mr-3" size="small" shape="circle" :src="user.avatar" />
+            <span>{{ user.name }}</span>
         </div>
-        <a-menu :class="['avatar-menu']" slot="overlay">
-            <a-menu-item>
+        <a-menu style="width: 150px" slot="overlay">
+            <a-menu-item @click="toUserCenter">
                 <a-icon type="user" />
-                <span>{{profile}}</span>
-            </a-menu-item>
-            <a-menu-item>
-                <a-icon type="setting" />
-                <span>{{setting}}</span>
+                <span>{{ profile }}</span>
             </a-menu-item>
             <a-menu-divider />
             <a-menu-item @click="logout">
-                <a-icon style="margin-right: 8px;" type="poweroff" />
-                <span>{{loginOut}}</span>
+                <a-icon class="tw-mr-2" type="poweroff" />
+                <span>{{ loginOut }}</span>
             </a-menu-item>
         </a-menu>
     </a-dropdown>
@@ -47,25 +43,9 @@ export default {
             logout();
             this.$router.push('/login');
         },
+        toUserCenter() {
+            this.$router.push('/user_center');
+        },
     },
 };
 </script>
-
-<style lang="less">
-.header-avatar {
-    display: inline-flex;
-    .avatar,
-    .name {
-        align-self: center;
-    }
-    .avatar {
-        margin-right: 8px;
-    }
-    .name {
-        font-weight: 500;
-    }
-}
-.avatar-menu {
-    width: 150px;
-}
-</style>
diff --git a/src/pages/frame/services/accountService.js b/src/pages/frame/services/accountService.js
index c33c8d8..0becd66 100644
--- a/src/pages/frame/services/accountService.js
+++ b/src/pages/frame/services/accountService.js
@@ -1,5 +1,7 @@
 import { request, METHOD } from '@/utils/requestUtil';
 import md5 from 'crypto-js/md5';
+import { clearToken, clearUserId } from '@/utils';
+import { logoutApi } from '@/api';
 
 /**
  * 登录服务,登录成功后 根据用户ID 获取用户 角色 + 菜单 + 功能权限 + 用户基本信息
@@ -18,11 +20,14 @@ export async function login(userName, password) {
  * 退出登录
  */
 export function logout() {
-    //清除所有保存的信息
-    localStorage.removeItem(process.env.VUE_APP_ROUTES_KEY);
-    localStorage.removeItem(process.env.VUE_APP_PERMISSIONS_KEY);
-    localStorage.removeItem(process.env.VUE_APP_ROLES_KEY);
-    localStorage.removeItem(process.env.VUE_APP_USER_KEY);
+    // //清除所有保存的信息
+    // localStorage.removeItem(process.env.VUE_APP_ROUTES_KEY);
+    // localStorage.removeItem(process.env.VUE_APP_PERMISSIONS_KEY);
+    // localStorage.removeItem(process.env.VUE_APP_ROLES_KEY);
+    // localStorage.removeItem(process.env.VUE_APP_USER_KEY);
+    clearToken();
+    clearUserId();
+    return logoutApi();
 }
 
 export default {
diff --git a/src/pages/frame/view/login/Login.vue b/src/pages/frame/view/login/Login.vue
index 569a193..28052e0 100644
--- a/src/pages/frame/view/login/Login.vue
+++ b/src/pages/frame/view/login/Login.vue
@@ -105,25 +105,27 @@ export default {
         ...mapMutations('accountModule', ['setUser', 'setPermissions', 'setRoles']),
         onSubmit(e) {
             e.preventDefault();
-            this.form.validateFields(err => {
+            this.form.validateFields(async err => {
                 if (!err) {
                     this.logging = true;
                     const userName = this.form.getFieldValue('userName');
                     const password = this.form.getFieldValue('password');
-                    login(userName, password).then(this.afterLogin);
+                    try {
+                        const result = await login(userName, password);
+                        const { token, userId } = result;
+                        setToken(token);
+                        setUserId(userId);
+                        this.$router.replace('/dashboard/workbench');
+                    } catch (error) {
+                        // todo
+                    }
+                    this.logging = false;
                 }
             });
         },
         onChange(e) {
             this.checked = e.target.checked;
         },
-        afterLogin(result) {
-            this.logging = false;
-            const { token, userId } = result;
-            setToken(token);
-            setUserId(userId);
-            this.$router.replace('/dashboard/workbench');
-        },
     },
 };
 </script>
diff --git a/src/pages/user/index.vue b/src/pages/user/index.vue
new file mode 100644
index 0000000..4ca13f9
--- /dev/null
+++ b/src/pages/user/index.vue
@@ -0,0 +1,3 @@
+<template>
+    <h1>用户个人中心</h1>
+</template>
diff --git a/src/router/config.js b/src/router/config.js
index 33a0567..0903de8 100644
--- a/src/router/config.js
+++ b/src/router/config.js
@@ -2,6 +2,7 @@ import { BlankTemplateView, PageTemplateView, TabsTemplateView } from '@/pages/f
 
 // 路由配置
 const options = {
+    mode: 'history',
     routes: [
         {
             path: '/login',
@@ -25,10 +26,16 @@ const options = {
         },
         {
             path: '/',
-            name: '首页',
             component: TabsTemplateView,
-            redirect: '/login',
+            redirect: '/home',
+            name: '首页',
             children: [
+                {
+                    path: 'home',
+                    name: 'Home',
+                    meta: { icon: 'home' },
+                    component: () => import('@/pages/home/index.vue'),
+                },
                 {
                     path: 'dashboard',
                     name: 'Dashboard',
@@ -116,6 +123,12 @@ const options = {
                         },
                     ],
                 },
+                {
+                    path: 'user_center',
+                    name: '个人中心',
+                    meta: { icon: 'user' },
+                    component: () => import('@/pages/user/index.vue'),
+                },
             ],
         },
     ],
diff --git a/src/utils/index.js b/src/utils/index.js
index 2bb55c6..e0bae7d 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -9,6 +9,9 @@ export function getUserId() {
 export function setUserId(val) {
     window.sessionStorage.setItem(USERID_KEY, val);
 }
+export function clearUserId() {
+    window.sessionStorage.removeItem(USERID_KEY);
+}
 
 /**
  * 转变菜单列表为tree结构
-- 
GitLab