From 77c09a4b488871ff2cf8c75ba22f0875b394f07b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=91=E6=96=87=E5=8F=AF?= <1041367524@qq.com>
Date: Thu, 17 Mar 2022 21:43:40 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E8=B7=AF=E7=94=B1=E7=B3=BB=E7=BB=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/auth.js                       |  3 +-
 src/layouts/components/main.vue       |  4 +-
 src/layouts/components/menu.vue       |  3 ++
 src/layouts/components/profile.vue    |  4 +-
 src/router/index.js                   | 67 +++++++++------------------
 src/store/modules/auth.js             | 35 +++++---------
 src/store/modules/layout.js           |  6 +--
 src/views/global/404.vue              |  4 +-
 src/views/home/index.vue              |  2 +-
 src/views/system/permission/index.vue |  7 +++
 src/views/system/role/index.vue       |  7 +++
 src/views/system/user/index.vue       |  7 +++
 12 files changed, 70 insertions(+), 79 deletions(-)
 create mode 100644 src/views/system/permission/index.vue
 create mode 100644 src/views/system/role/index.vue
 create mode 100644 src/views/system/user/index.vue

diff --git a/src/api/auth.js b/src/api/auth.js
index 68b7c0b..0f2d6bb 100644
--- a/src/api/auth.js
+++ b/src/api/auth.js
@@ -24,10 +24,11 @@ export function getUserInfo() {
     });
 }
 // 获取权限列表
-export function getPermission() {
+export function getPermission(params) {
     return request({
         url: '/u-admin/uc/ucPermission/listUserMenu',
         method: 'get',
+        params,
     });
 }
 // 退出登录
diff --git a/src/layouts/components/main.vue b/src/layouts/components/main.vue
index ab19ee5..39fc213 100644
--- a/src/layouts/components/main.vue
+++ b/src/layouts/components/main.vue
@@ -16,9 +16,9 @@
         box-shadow: @layout-shadow;
         :deep(.el-scrollbar__view) {
             width: 100%;
-            min-height: 100%;
+            height: 100%;
             > * {
-                display: inline-block; // 创建BFC
+                // display: inline-block; // 创建BFC
                 width: 100%;
                 height: 100%;
                 padding: @layout-space-large;
diff --git a/src/layouts/components/menu.vue b/src/layouts/components/menu.vue
index e855e22..48d61b5 100644
--- a/src/layouts/components/menu.vue
+++ b/src/layouts/components/menu.vue
@@ -40,6 +40,9 @@
                 transition: opacity 0.3s;
             }
         }
+        :deep(*) {
+            white-space: nowrap;
+        }
         .title {
             width: 100%;
             height: @layout-header-height;
diff --git a/src/layouts/components/profile.vue b/src/layouts/components/profile.vue
index 54bf890..33ec988 100644
--- a/src/layouts/components/profile.vue
+++ b/src/layouts/components/profile.vue
@@ -3,7 +3,7 @@
         <el-avatar :src="userInfo?.avatar" />
         <el-dropdown size="middle" @command="handleCommand">
             <span class="el-dropdown-link">
-                <span>{{ userInfo?.username }}</span>
+                <span>{{ userInfo?.nickname || userInfo?.username }}</span>
                 <XIcon class="el-icon--right" name="ArrowDown" />
             </span>
             <template #dropdown>
@@ -18,7 +18,7 @@
 
 <script setup>
     const store = useStore();
-    const userInfo = computed(() => store.state.local.userInfo);
+    const userInfo = computed(() => store.state.auth.userInfo);
     const handleCommand = (command) => {
         switch (command) {
             case 'logout':
diff --git a/src/router/index.js b/src/router/index.js
index e7a4d88..ac5141c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -27,38 +27,7 @@ Object.values(modules).forEach((mod) => {
     dynamicRoutes.push(...mod.default);
 });
 
-export const routes = [
-    ...globalRoutes,
-    {
-        path: '/',
-        name: 'App',
-        redirect: { name: 'Home' },
-        component: () => import('@/layouts/default.vue'),
-        meta: {
-            layout: true,
-        },
-        children: [
-            {
-                path: '/home',
-                name: 'Home',
-                component: () => import('@/views/home/index.vue'),
-                meta: {
-                    title: '首页',
-                    icon: 'home-line',
-                },
-            },
-        ],
-    },
-    ...dynamicRoutes,
-    {
-        path: '/:pathMatch(.*)*',
-        redirect: '/404',
-        name: 'NotFound',
-        meta: {
-            global: true,
-        },
-    },
-];
+export const routes = [];
 
 const router = createRouter({
     history: createWebHistory(),
@@ -69,22 +38,17 @@ import store from '@/store';
 router.onError((error, to) => {
     console.info('[router] error', error, to);
 });
-import debug from '@/utils/debug';
 router.beforeEach(async (to, from, next) => {
     if (!from.matched.length) {
         store.loadCache();
     }
-    // if (!store.state.auth.userInfo) {
-    //     await store.dispatch('auth/getUserInfo');
-    // }
-    // if (!store.state.auth.permission.length) {
-    //     await store.dispatch('auth/getPermission');
-    // }
-    if (to.matched.length) {
-        console.info(`[router] from ${from.name} to ${to.name}`);
-        if (to.meta.global) {
-            next();
+    if (store.state.local.token) {
+        if (!store.state.auth.permission.length) {
+            await store.dispatch('auth/getUserInfo');
+            await store.dispatch('auth/getPermission');
+            next({ ...to, replace: true });
         } else {
+            console.info(`[router] from ${from.name} to ${to.name}`);
             const deep = (route) => {
                 let child = (route.children || []).find((item) => !item.meta?.hidden);
                 return child?.children?.length ? deep(child?.children) : child?.name;
@@ -101,6 +65,10 @@ router.beforeEach(async (to, from, next) => {
                 store.commit('layout/addTab', to);
             }
         }
+    } else if (to.meta.global) {
+        next();
+    } else {
+        next({ name: 'Login' });
     }
 });
 
@@ -111,6 +79,17 @@ export const reset = (routers) => {
     router.getRoutes().forEach((item) => {
         router.removeRoute(item.name);
     });
-    flat(routers).forEach(router.addRoute);
+    flat([
+        ...globalRoutes,
+        ...routers,
+        {
+            path: '/:pathMatch(.*)*',
+            redirect: '/404',
+            name: 'NotFound',
+            meta: {
+                global: true,
+            },
+        },
+    ]).forEach(router.addRoute);
     console.info('[router] reset', router.getRoutes());
 };
diff --git a/src/store/modules/auth.js b/src/store/modules/auth.js
index c0849e4..c237674 100644
--- a/src/store/modules/auth.js
+++ b/src/store/modules/auth.js
@@ -1,23 +1,7 @@
-import { getUserInfo, getPermission } from '@/api/auth';
+import { getUserInfo, getPermission, sendSmsCode, login } from '@/api/auth';
 import { ElMessage } from '@/plugins/element-plus';
-const sms = () => {
-    return new Promise((resolve) => {
-        setTimeout(() => {
-            resolve(true);
-        }, 1000);
-    });
-};
-const login = () => {
-    return new Promise((resolve) => {
-        setTimeout(() => {
-            resolve({
-                token: 'eyJhbGciOiJSUzI1NiJ9.eyJ1aWQiOjEzMjI1LCJwaG9uZSI6IjEzMjAyMDkwNjAxIiwibG9naW5UeXBlIjo1LCJ1c2VyTm8iOiIxMzIyNSIsIm5pY2tuYW1lIjoi5b-D5LmL5omA5ZCRIiwiZGVwdElkIjpudWxsLCJleHAiOjE2Nzg5NzI5NjksInVzZXJuYW1lIjoiTUNBLTMzYTkifQ.bDgxrGWUYW1iGLQidoj3q4lBXTlI0zKMBslIjN5LuvyLE4O8LPfFFYh33nAlevKuey_tqYQSWn0Cvm81Ywuksn70lGyy5-BEBbLUQCXaFKaWXujc2FzWFIvPHzAXfF16aUzyKkCppR5tfLDQz5cimLHAQBw24Ar69UCMiYJjN8E',
-            });
-        }, 1000);
-    });
-};
 import router, { reset as resetRoutes } from '@/router';
-const modules = import.meta.glob('../views/*/*.vue');
+const viewComponents = import.meta.glob('../../views/**/*.vue');
 const state = () => ({
     userInfo: null,
     permission: [],
@@ -40,7 +24,7 @@ const mutations = {
                     },
                 };
                 if (!route.path.startsWith('/')) {
-                    route.path = parent.path + route.path;
+                    route.path = parent.path + '/' + route.path;
                 }
                 route.meta.menu = route.path.replaceAll(/\/:[^?]+\?/g, '');
                 let activeMenu = route.meta.activeMenu;
@@ -52,12 +36,15 @@ const mutations = {
                     if (route.component === 'Layout') {
                         route.component = () => import('@/layouts/default.vue');
                     } else {
-                        let path = `../views/${route.component}`;
+                        let path = `../../views/${route.component}`;
                         if (!path.endsWith('.vue')) {
                             path += '.vue';
                         }
                         let alias = path.replace(/\.vue$/, '/index.vue');
-                        route.component = modules[path] || modules[alias];
+                        route.component = viewComponents[path] || viewComponents[alias];
+                        if (!route.component) {
+                            route.component = () => import('@/views/global/404.vue');
+                        }
                     }
                 }
                 route.children = convert(item.children || [], route);
@@ -66,12 +53,12 @@ const mutations = {
             });
         };
         state.permission = convert(data);
-        // resetRoutes(state.permission);
+        resetRoutes(state.permission);
     },
 };
 const actions = {
     sms: async ({ commit }, data) => {
-        let res = await sms(data);
+        let res = await sendSmsCode(data);
         if (res) {
             ElMessage.success('验证码已发送');
             commit('local/sendMessage', {}, { root: true });
@@ -96,7 +83,7 @@ const actions = {
         router.push({ name: 'Login' });
     },
     getPermission: async ({ commit }) => {
-        let res = await getPermission();
+        let res = await getPermission({ systemCode: 'msb_shop_admin' });
         if (res) {
             commit('setPermission', res);
         } else {
diff --git a/src/store/modules/layout.js b/src/store/modules/layout.js
index 35df3aa..829f844 100644
--- a/src/store/modules/layout.js
+++ b/src/store/modules/layout.js
@@ -1,4 +1,4 @@
-import router, { routes } from '@/router';
+import router from '@/router';
 const state = () => ({
     activeAside: null,
     collapseAside: false,
@@ -9,10 +9,10 @@ const state = () => ({
     breakcrumbList: [],
 });
 const getters = {
-    asideList: () => {
+    asideList: (state, getters, rootState) => {
         const deep = (arr) =>
             arr.flatMap((item) => (item.meta?.layout ? deep(item.children || []) : item.meta?.global ? [] : item));
-        return deep(routes);
+        return deep(rootState.auth.permission);
     },
     collapseAside: (state) => state.collapseAside || state.menuList.length < 2,
     activeAsideName: (state, getters) => getters.asideList.find((item) => item.name === state.activeAside)?.meta.title,
diff --git a/src/views/global/404.vue b/src/views/global/404.vue
index b6da163..ee83bc6 100644
--- a/src/views/global/404.vue
+++ b/src/views/global/404.vue
@@ -54,8 +54,8 @@
 
 <style lang="less" scoped>
     .container {
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
         background: #000 url('~/global/login-bgp.png') center center / 100% 100% no-repeat;
         display: flex;
         justify-content: center;
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index e25ed4a..b0567c7 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -36,7 +36,7 @@
     const form = reactive({ msg: '123' });
 </script>
 
-<style lang="less">
+<style lang="less" scoped>
     .container {
         height: 2000px !important;
     }
diff --git a/src/views/system/permission/index.vue b/src/views/system/permission/index.vue
new file mode 100644
index 0000000..6e2c71c
--- /dev/null
+++ b/src/views/system/permission/index.vue
@@ -0,0 +1,7 @@
+<template>
+    <div>权限列表</div>
+</template>
+
+<script setup></script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
new file mode 100644
index 0000000..ca57cfc
--- /dev/null
+++ b/src/views/system/role/index.vue
@@ -0,0 +1,7 @@
+<template>
+    <div>角色列表</div>
+</template>
+
+<script setup></script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue
new file mode 100644
index 0000000..2bc92bf
--- /dev/null
+++ b/src/views/system/user/index.vue
@@ -0,0 +1,7 @@
+<template>
+    <div>用户列表</div>
+</template>
+
+<script setup></script>
+
+<style lang="less" scoped></style>