修改

src/api/user.js

@@ -15,3 +15,11 @@ export function login(datas) {
         data: datas
     })
 }
+
+export function mirlist(datas) {
+    return request({
+        url: '/api/ls',
+        method: 'post',
+        data: datas
+    })
+}

src/layout/components/AppMain.vue

@@ -20,7 +20,8 @@ export default {
 <style scoped>
 .app-main {
   /*50 = navbar  */
-  min-height: calc(100vh - 50px);
+  /* min-height: calc(100vh - 50px); */
+  min-height:100%;
   width: 100%;
   position: relative;
   overflow: hidden;

src/layout/components/Sidebar/SidebarItem.vue

@@ -30,7 +30,6 @@ import { isExternal } from '@/utils/validate'
 import Item from './Item'
 import AppLink from './Link'
 import FixiOSBug from './FixiOSBug'
-
 export default {
   name: 'SidebarItem',
   components: { Item, AppLink },
@@ -50,6 +49,9 @@ export default {
       default: ''
     }
   },
+//     mounted: function () {
+//     console.log(222);
+//   },
   data() {
     // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
     // TODO: refactor with render function

src/layout/components/Sidebar/index.vue

@@ -23,7 +23,6 @@ import { mapGetters } from 'vuex'
 import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
-
 export default {
   components: { SidebarItem, Logo },
   computed: {

src/layout/index.vue

@@ -2,17 +2,18 @@
   <div :class="classObj" class="app-wrapper">
     <div class="toptitle clearfix">
         <a class="leftk" href="javascript:;">
-            <img src="" alt="图片">
-            
+            <img src="../common/img/jialuoma.png" alt="图片">
+            <em class="erectline"></em>
+            <span>后台管理系统</span>
         </a>
         <div class="rightk tpriht">
             <a id="dLabel" href="javascript:;" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-                <img class="mailtp verMiddle" src="" alt="图片">
+                <img class="mailtp verMiddle" src="../common/img/jialuoma.png" alt="图片">
                 <span class="verMiddle glyphicon glyphicon-menu-down"></span>
             </a>
             <em class="erectline"></em>
             <!-- <a class="Cache tuichu" href="/admin.php/Cache/index.html">清除缓存</a> -->
-            <el-button class="quit" @click="dengchu" id="tuichu" size="mini" round>退出</el-button>
+            <!-- <el-button class="quit" @click="dengchu" id="tuichu" size="mini" round>退出</el-button> -->
         </div>
     </div>
     <div class="content_main">
@@ -59,6 +60,7 @@ export default {
       }
     }
   },
+  
   methods: {
     handleClickOutside() {
       this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
@@ -70,6 +72,7 @@ export default {
 <style lang="scss" scoped>
   @import "~@/styles/mixin.scss";
   @import "~@/styles/variables.scss";
+  @import "~@/styles/publics.scss";
 
   .app-wrapper {
     @include clearfix;
@@ -108,11 +111,5 @@ export default {
     width: 100%;
   }
 
-.content_main{margin-top:91px;}
-.toptitle{color:#FFF;height:91px;padding:0 6% 0 34px;z-index:1002;background-color:#2b3245;position:fixed;top:0;left:0;right:0;}
-.toptitle .leftk{float:left;margin-top:18px;}
-.toptitle .leftk>img{vertical-align:middle;}
-.toptitle .leftk>i{vertical-align:middle;color:#FFF;font-size:30px;margin:6px 0 0 15px;}
-.toptitle .rightk{float:right;margin-top:24px;position:relative;}
-.toptitle .erectline{margin:0 18px;display:inline-block;vertical-align:middle;height:40px;width:1px;background-color:#414758;}
+.content_main{padding-top:91px;}
 </style>

src/main.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 
-import 'normalize.css/normalize.css' // A modern alternative to CSS resets
+//import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
@@ -13,7 +13,7 @@ import store from './store'
 import router from './router'
 
 import '@/icons' // icon
-//import '@/permission' // permission control如果
+import '@/permission' // 权限处理
 
 /**
  * If you don't want to use mock-server

src/permission.js

@@ -10,55 +10,103 @@ NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
 const whiteList = ['/login'] // no redirect whitelist
 
+
+// 动态添加路由
+import { mirlist } from '@/api/user'
+mirlist().then(response => {
+    let datamain = response.data;
+    routesData(datamain.data.menus);
+    //console.log(response);
+}).catch(function (error) {
+    Message({
+        showClose: true,
+        message: error,
+        type: 'error'
+    });
+});
+
+function routesData(data) {
+    // 重新加载一次 VueRouter
+    //router.reloadRouter()
+    let currentMenu = [
+        {
+            path: '/',
+            component: () => import('@/views/systme/changepass'),
+            children: []
+        }
+    ]
+    console.log(router);
+    data.forEach(item => {
+        console.log(item);
+        const temp = {
+            name: item.directory,
+            path: item.directory,
+            component: () => import(`../page/${item.path}/${firstUppercase(i.path)}.vue`)
+        }
+        // 动态添加为 filemange 的子路由
+        router.addRoutes(currentMenu)
+        // item.children.forEach(i => {
+        //     // 组装路由配置
+        //     const temp = {
+        //         name: i.path,
+        //         path: i.path,
+        //         component: () => import(`../page/${item.path}/${firstUppercase(i.path)}.vue`)
+        //     }
+        //     // 动态添加为 filemange 的子路由
+        //     router.addRoute("filemange", temp)
+        // })
+    })
+}
+
 router.beforeEach(async(to, from, next) => {
   // start progress bar
   NProgress.start()
 
   // set page title
   document.title = getPageTitle(to.meta.title)
-
+    next()
   // determine whether the user has logged in
-  const hasToken = getToken()
+//   const hasToken = getToken()
 
-  if (hasToken) {
-    if (to.path === '/login') {
-      // if is logged in, redirect to the home page
-      next({ path: '/' })
-      NProgress.done()
-    } else {
-      const hasGetUserInfo = store.getters.name
-      if (hasGetUserInfo) {
-        next()
-      } else {
-        try {
-          // get user info
-          await store.dispatch('user/getInfo')
+//   if (hasToken) {
+//     if (to.path === '/login') {
+//       // if is logged in, redirect to the home page
+//       next({ path: '/' })
+//       NProgress.done()
+//     } else {
+//       const hasGetUserInfo = store.getters.name
+//       if (hasGetUserInfo) {
+//         next()
+//       } else {
+//         try {
+//           // get user info
+//           await store.dispatch('user/getInfo')
 
-          next()
-        } catch (error) {
-          // remove token and go to login page to re-login
-          await store.dispatch('user/resetToken')
-          Message.error(error || 'Has Error')
-          next(`/login?redirect=${to.path}`)
-          NProgress.done()
-        }
-      }
-    }
-  } else {
-    /* has no token*/
+//           next()
+//         } catch (error) {
+//           // remove token and go to login page to re-login
+//           await store.dispatch('user/resetToken')
+//           Message.error(error || 'Has Error')
+//           next(`/login?redirect=${to.path}`)
+//           NProgress.done()
+//         }
+//       }
+//     }
+//   } else {
+//     /* has no token*/
 
-    if (whiteList.indexOf(to.path) !== -1) {
-      // in the free login whitelist, go directly
-      next()
-    } else {
-      // other pages that do not have permission to access are redirected to the login page.
-      next(`/login?redirect=${to.path}`)
-      NProgress.done()
-    }
-  }
+//     if (whiteList.indexOf(to.path) !== -1) {
+//       // in the free login whitelist, go directly
+//       next()
+//     } else {
+//       // other pages that do not have permission to access are redirected to the login page.
+//       next(`/login?redirect=${to.path}`)
+//       NProgress.done()
+//     }
+//   }
 })
 
 router.afterEach(() => {
   // finish progress bar
-  NProgress.done()
+  NProgress.done()  // 释放钩子
 })

src/router/index.js

@@ -46,12 +46,19 @@ export const constantRoutes = [
         path: '/',
         component: Layout,
         redirect: '/filemange', // 重定向地址
-        children: [{
+        name: 'filemange',
+        alwaysShow: false,
+        meta: { title: '文件管理', icon: 'el-icon-s-help' },
+        children: [
+            {
                 path: 'filemange',
                 name: 'Filemange',
                 component: () => import('@/views/filemange/index'),
                 meta: { title: '文件管理', icon: 'dashboard' }
-        }]
+            }
+            
+
+        ]
     },
     {
         path: '',
@@ -64,31 +71,6 @@ export const constantRoutes = [
             meta: { title: '用户管理', icon: 'dashboard' }
         }]
     },
-
-    // {
-    //     path: '/',
-    //     component: Layout,
-    //     redirect: '/filemange',  // 重定向地址
-    //     children: [{
-    //         path: 'filemange',
-    //         name: 'filemange',
-    //         component: () => import('@/views/dashboard/index?a=1'),
-    //         meta: { title: '文件管理', icon: 'dashboard' }
-    //     }]
-    // },
-
-    // {
-    //     path: '/',
-    //     component: Layout,
-    //     redirect: '/usermange',
-    //     children: [{
-    //         path: 'usermange',
-    //         name: 'usermange',
-    //         component: () => import('@/views/dashboard/index?a=2'),
-    //         meta: { title: '用户管理', icon: 'dashboard' }
-    //     }]
-    // },
-
     {
         path: '/systme',
         component: Layout,
@@ -107,89 +89,25 @@ export const constantRoutes = [
                 name: 'userrelated',
                 component: () => import('@/views/systme/userrelated'),
                 meta: { title: '用户相关', icon: 'tree' }
+            },
+            {
+                path: 'userrelated2',
+                name: 'userrelated2',
+                component: () => import('@/views/systme/userrelated'),
+                meta: { title: '皮肤更换', icon: 'tree' }
+            }
+        ]
+    },
+    {
+        path: 'external-link',
+        component: Layout,
+        children: [
+            {
+                path: 'https://dev.filesite.io/',
+                meta: { title: '前端展示页面', icon: 'link' }
             }
         ]
     },
-
-
-//   {
-//     path: '/form',
-//     component: Layout,
-//     children: [
-//       {
-//         path: 'index',
-//         name: 'Form',
-//         component: () => import('@/views/form/index'),
-//         meta: { title: 'Form', icon: 'form' }
-//       }
-//     ]
-//   },
-
-//   {
-//     path: '/nested',
-//     component: Layout,
-//     redirect: '/nested/menu1',
-//     name: 'Nested',
-//     meta: {
-//       title: 'Nested',
-//       icon: 'nested'
-//     },
-//     children: [
-//       {
-//         path: 'menu1',
-//         component: () => import('@/views/nested/menu1/index'), // Parent router-view
-//         name: 'Menu1',
-//         meta: { title: 'Menu1' },
-//         children: [
-//           {
-//             path: 'menu1-1',
-//             component: () => import('@/views/nested/menu1/menu1-1'),
-//             name: 'Menu1-1',
-//             meta: { title: 'Menu1-1' }
-//           },
-//           {
-//             path: 'menu1-2',
-//             component: () => import('@/views/nested/menu1/menu1-2'),
-//             name: 'Menu1-2',
-//             meta: { title: 'Menu1-2' },
-//             children: [
-//               {
-//                 path: 'menu1-2-1',
-//                 component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
-//                 name: 'Menu1-2-1',
-//                 meta: { title: 'Menu1-2-1' }
-//               },
-//               {
-//                 path: 'menu1-2-2',
-//                 component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
-//                 name: 'Menu1-2-2',
-//                 meta: { title: 'Menu1-2-2' }
-//               },
-//               {
-//                     path: 'menu1-2-3',
-//                     component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
-//                     name: 'jiamaluo',
-//                     meta: { title: 'jialmal' }
-//                 }
-//             ]
-//           },
-//           {
-//             path: 'menu1-3',
-//             component: () => import('@/views/nested/menu1/menu1-3'),
-//             name: 'Menu1-3',
-//             meta: { title: 'Menu1-3' }
-//           }
-//         ]
-//       },
-//       {
-//         path: 'menu2',
-//         component: () => import('@/views/nested/menu2/index'),
-//         name: 'Menu2',
-//         meta: { title: 'menu2' }
-//       }
-//     ]
-//   },
-
 
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
@@ -206,7 +124,12 @@ const router = createRouter()
 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
 export function resetRouter() {
   const newRouter = createRouter()
-  router.matcher = newRouter.matcher // reset router
+  router.matcher = newRouter.matcher // reset router 重置路由器
 }
-
+// router.reloadRouter = function () {
+//     router.matcher = new Router({
+//         mode: "history",
+//         constantRoutes
+//     }).matcher
+// }
 export default router

src/styles/publics.scss

@@ -0,0 +1,49 @@
+.toptitle {
+    color: #FFF;
+    height: 91px;
+    padding: 0 6% 0 36px;
+    z-index: 1002;
+    background-color: #2b3245;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    overflow:hidden;
+}
+
+.toptitle .leftk {
+    float: left;
+    margin-top: 16px;
+    height:60px;
+}
+
+.toptitle .leftk>img {
+    vertical-align: middle;
+    display:inline-block;
+    max-width: 100%;
+    height:100%;
+    background-color:#FFF;
+    border-radius:50%;
+}
+
+.toptitle .leftk>i {
+    vertical-align: middle;
+    color: #FFF;
+    font-size: 30px;
+    margin: 6px 0 0 15px;
+}
+
+.toptitle .rightk {
+    float: right;
+    margin-top: 24px;
+    position: relative;
+}
+
+.toptitle .erectline {
+    margin: 0 18px;
+    display: inline-block;
+    vertical-align: middle;
+    height: 40px;
+    width: 1px;
+    background-color: #414758;
+}

src/styles/sidebar.scss

@@ -17,7 +17,7 @@
     top: 91px;
     bottom: 0;
     left: 0;
-    z-index: 1001;
+    z-index: 2002;
     overflow: hidden;
 
     // reset element-ui css

src/styles/variables.scss

@@ -3,7 +3,7 @@ $menuText:#bfcbd9;
 $menuActiveText:#409EFF;
 $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg:#304156;
+$menuBg:#2b3245;
 $menuHover:#263445;
 
 $subMenuBg:#1f2d3d;

src/utils/request.js

@@ -13,6 +13,7 @@ const service = axios.create({
     // },
     timeout: 0 // request timeout
 })
+//service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 
 // request interceptor
 // service.interceptors.request.use(

src/views/login/index.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="login-container">
     <div class="toptitle clearfix">
-        <a class="leftk" href="javascript:;"><img src="" alt="图片"></a>
+        <a class="leftk" href="javascript:;">
+            <img src="../../common/img/jialuoma.png" alt="图片">
+            <em class="erectline"></em>
+            <span>后台管理系统</span>
+        </a>
     </div>
     <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
 
@@ -82,7 +86,7 @@
 import { captcha, login } from '@/api/user'
 export default {
   
-  mounted: function () {
+  created: function () {
     this.getcaptcha();
   },
   data() {
@@ -165,10 +169,10 @@ export default {
         // console.log(valid);
         if (valid) {
             this.loading = true
-            //let thiss = this;
+            let thiss = this;
             login(this.loginForm).then(response => {
                 let datamain = response.data;
-                //console.log(response);
+                console.log(1111);
                 if (datamain.code == 0) {
                     this.loading = false;
                     this.$message({
@@ -182,7 +186,13 @@ export default {
                 
                 this.$router.push({path: '/filemange'})
                 //console.log('6666');
-            })
+            }).catch(function (error) {
+                thiss.$message({
+                    showClose: true,
+                    message: error,
+                    type: 'error'
+                });
+            });
             
             // axios.post('/api/login', this.loginForm, {headers: {'Content-Type': 'multipart/form-data'}
             // }).then(function (response) {
@@ -210,6 +220,8 @@ export default {
 }
 </script>
 <style lang="scss">
+@import "~@/styles/publics.scss";
+
 $bg:#283443;
 $light_gray:#fff;
 $cursor: #3c3535;