feat: 登出系统处理

src/api/index.js

 import { request, METHOD } from '@/utils';
 export * from './menu';
+export * from './system';
 
 export function getUserDetailInfoApi() {
     return request('/api/v1/detail', METHOD.GET);

src/api/system.js

+import { putReq } from '@/utils';
+
+export function logoutApi() {
+    return putReq('/api/v1/logout');
+}

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({

src/pages/frame/components/header/LayoutTopHeaderAvatar.vue

 <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>

src/pages/frame/services/accountService.js

 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 {

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>

src/pages/user/index.vue

+<template>
+    <h1>用户个人中心</h1>
+</template>

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'),
+                },
             ],
         },
     ],

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结构