添加中间页面

src/permission.js

@@ -4,7 +4,7 @@ import { Message } from 'element-ui'
 import NProgress from 'nprogress' // progress bar
 import 'nprogress/nprogress.css' // progress bar style
 import { getToken } from '@/utils/auth'
-import de from "element-ui/src/locale/lang/de"; // get token from cookie
+import de from 'element-ui/src/locale/lang/de' // get token from cookie
 // import getPageTitle from '@/utils/get-page-title'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
@@ -18,15 +18,21 @@ router.beforeEach((to, from, next) => {
     if (to.path === '/login') {
       next()
       NProgress.done()
+    } else if (to.path === '/home') {
+      next()
+      NProgress.done()
     } else {
       if (store.getters.roles.length === 0) {
         // 判断当前用户是否已拉取完user_info信息
         store.dispatch('GetInfo').then(res => {
+          // TODO: clear this log
+          console.log(`res=wei`, res)
           // 判断用户是否有权限 有角色
           if (res.data.permissions && res.data.permissions.length > 0) {
             // 拉取user_info
             const roles = res.data.roles
-            store.dispatch('GenerateRoutes', { roles }).then((routers) => {
+            const menuName = store.getters.menuName
+            store.dispatch('GenerateRoutes', { roles, menuName }).then((routers) => {
               // 判断用户是否有路由
               if (routers.accessedRoutes && routers.accessedRoutes.length > 0 && routers.getRouters && routers.getRouters.length > 0) {
                 // 测试 默认静态页面

src/router/index.js

@@ -43,6 +43,11 @@ export const constantRoutes = [
     component: (resolve) => require(['@/views/login/login.vue'], resolve),
     hidden: true
   },
+  {
+    path: '/home',
+    component: (resolve) => require(['@/views/home.vue'], resolve),
+    hidden: true
+  },
   // {
   //   path: '/forgetPwd',
   //   component: LayoutLogin,

src/store/getters.js

@@ -6,6 +6,7 @@ const getters = {
   name: state => state.user.name,
   specialTag: state => state.user.specialTag,
   roles: state => state.user.roles,
+  menuName: state => state.user.menuName,
   introduction: state => state.user.introduction,
   permissions: state => state.user.permissions,
   permission_routes: state => state.permission.routes,

src/store/modules/permission.js

@@ -16,18 +16,29 @@ const permission = {
   },
   actions: {
     // 生成路由
-    GenerateRoutes({ commit }) {
+    GenerateRoutes({ commit }, menuName) {
       return new Promise(resolve => {
+        // TODO: clear this log
+        console.log(`menuName`, menuName)
         // 向后端请求路由数据
         getInfo().then(res => {
-          const accessedRoutes = filterAsyncRouter(res.data.menus)
+          const newRoute = []
+          // 根据点击的菜单名匹配对应的菜单
+          res.data.menus.forEach(item => {
+            if (item.meta.title === menuName.menuName) {
+              newRoute.push(item)
+            }
+          })
+          const accessedRoutes = filterAsyncRouter(newRoute)
           if (accessedRoutes[0]) {
             const firstChild = getFirstChild(accessedRoutes[0])
             accessedRoutes.push({ path: '*', redirect: '/404', hidden: true })
             accessedRoutes.push({ path: '/', redirect: firstChild, hidden: true })
             commit('SET_ROUTES', accessedRoutes)
           }
-          const routers = { accessedRoutes: accessedRoutes, getRouters: res.data.menus }
+          const routers = { accessedRoutes: accessedRoutes, getRouters: newRoute }
+          // TODO: clear this log
+          console.log(`routers`, routers)
           resolve(routers)
         })
       })

src/store/modules/user.js

@@ -10,7 +10,8 @@ const user = {
     avatar: '',
     roles: [],
     permissions: [],
-    specialTag: ''
+    specialTag: '',
+    menuName: ''
 
   },
 
@@ -30,6 +31,9 @@ const user = {
     SET_ROLES: (state, roles) => {
       state.roles = roles
     },
+    SET_MENUNAME: (state, menuName) => {
+      state.menuName = menuName
+    },
     SET_PERMISSIONS: (state, permissions) => {
       state.permissions = permissions
     }
@@ -74,6 +78,15 @@ const user = {
         })
       })
     },
+
+    GetInfoMessage({ commit, state }, menuName) {
+      return new Promise((resolve, reject) => {
+        // TODO: clear this log
+        console.log(`menuName-getInfo`, menuName)
+        commit('SET_MENUNAME', menuName) // 存入菜单名
+        resolve(menuName)
+      })
+    },
     // 退出系统
     LogOut({ commit, state }) {
       return new Promise((resolve, reject) => {
@@ -81,6 +94,7 @@ const user = {
           commit('SET_TOKEN', '')
           commit('SET_ROLES', [])
           commit('SET_PERMISSIONS', [])
+          commit('SET_MENUNAME', '')
           removeToken()
           resolve()
         }).catch(error => {

src/views/home.vue

+<template>
+  <div class="home">
+    <div class="home-const" @click="gotoIndex('系统管理')">
+      <div>
+        <img src="../assets/image/img5@2x.png" style="width: 100%;height: 392px">
+      </div>
+      <div class="card-bottom">
+        <img src="../assets/image/icon5@2x.png" style="width: 40px;height: 40px;margin: 0 14px 0 20px">
+        <span class="card-title">系统管理</span>
+      </div>
+    </div>
+    <div class="home-const" @click="gotoIndex('日志管理')">
+      <div>
+        <img src="../assets/image/img6@2x.png" style="width: 100%;height: 392px">
+      </div>
+      <div class="card-bottom">
+        <img src="../assets/image/icon6@2x.png" style="width: 40px;height: 40px;margin: 0 14px 0 20px">
+        <span class="card-title">日志管理</span>
+      </div>
+    </div>
+    <div class="home-const" @click="gotoIndex('消息管理')">
+      <div>
+        <img src="../assets/image/img7@2x.png" style="width: 100%;height: 392px">
+      </div>
+      <div class="card-bottom">
+        <img src="../assets/image/icon7@2x.png" style="width: 40px;height: 40px;margin: 0 14px 0 20px">
+        <span class="card-title">消息管理</span>
+      </div>
+    </div>
+    <div class="home-const" @click="gotoIndex('运维管理')">
+      <div>
+        <img src="../assets/image/img8@2x.png" style="width: 100%;height: 392px">
+      </div>
+      <div class="card-bottom">
+        <img src="../assets/image/icon8@2x.png" style="width: 40px;height: 40px;margin: 0 14px 0 20px">
+        <span class="card-title">运维管理</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getInfo } from '@/api/login'
+
+export default {
+  name: 'Home',
+  data() {
+    return {
+
+    }
+  },
+  methods: {
+    gotoIndex(menuName) {
+      getInfo().then(res => {
+        if (res.data.permissions) {
+          // 判断用户是否有点击菜单的权限
+          var index = 0
+          res.data.menus.forEach(item => {
+            if (item.meta.title === menuName) {
+              index = index + 1
+            }
+          })
+          if (index > 0) {
+            // 存入点击的菜单名，便于后边路由跳转
+            this.$store.dispatch('GetInfoMessage', menuName).then(() => {
+              this.$router.push('/welcome')
+            })
+          } else {
+            this.$message.error('用户无权限')
+          }
+        } else {
+          this.$message.error('用户无权限')
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.home{
+  height: 100%;
+  background-image: url("../assets/image/login-background.jpg");
+  background-size: cover;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .home-const{
+    width: 394px;
+    height: 461px;
+    margin-right: 40px;
+    background: #FFFFFF;
+    border-radius: 8px 8px 8px 8px;
+    .card-bottom{
+      height: 70px;
+      display: flex;
+      align-items: center;
+    }
+    .card-title{
+      font-size: 18px;
+      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
+      font-weight: bold;
+      color: #363535;
+    }
+  }
+}
+
+</style>

src/views/login/login.vue

@@ -141,8 +141,8 @@ export default {
               // window.location.href = `${this.reLocation}/#/`
               // this.$router.push({ path: `http://main.court.com${this.redirect || "/"}` });
               this.loading = false
-              this.$router.push('/welcome')
-              // this.$router.push('/home')
+              // this.$router.push('/welcome')
+              this.$router.push('/home')
             })
             .catch(() => {
               this.loading = false