群控体系服务端开发模式-应用开发-前端个人资料开发 ...

一、总结

        其实程序开发到现在，简朴的后端框架就只剩下获取登录账号信息及获取登录账号菜单这两个功能咯。具体见下图：
        1、未登录时总业务流程图

        2、登录后总业务流程图

二、获取登录账号信息对接

        在根目次下src文件夹下store文件夹下modules文件夹下的user.js文件中，修改代码如下：

1. const state = {
2.     token: getToken(),
3.     username: '',
4.     avatar: '',
5.     email: '',
6.     realname: '',
7.     department_title: '',
8.     grade_title: '',
9.     rolename: '',
10.     roles: [],
11.     butts: []
12. }
14. const mutations = {
15.     SET_TOKEN: (state, token) => {
16.         state.token = token
17.     },
18.     SET_EMAIL: (state, email) => {
19.         state.email = email
20.     },
21.     SET_USERNAME: (state, username) => {
22.         state.username = username
23.     },
24.     SET_AVATAR: (state, avatar) => {
25.         state.avatar = avatar
26.     },
27.     SET_REALNAME: (state, realname) => {
28.         state.realname = realname
29.     },
30.     SET_DEPARTMENT_TITLE: (state, department_title) => {
31.         state.department_title = department_title
32.     },
33.     SET_GRADE_TITLE: (state, grade_title) => {
34.         state.grade_title = grade_title
35.     },
36.     SET_ROLENAME: (state, rolename) => {
37.         state.rolename = rolename
38.     },
39.     SET_BUTTS: (state, butts) => {
40.         state.butts = butts
41.     },
42.     SET_ROLES: (state, roles) => {
43.         state.roles = roles
44.     }
45. }
46. // get user info
47. getInfo({commit, state}) {
48.     return new Promise((resolve, reject) => {
49.         getInfo().then(response => {
50.             const {data} = response
51.             if (!data) {
52.                 reject('验证失败，请重新登录。')
53.             }
54.             const { butt, key, username, avatar, email, realname, department_title, grade_title, rolename } = data
55.             if (!butt || butt.length <= 0) {
56.                 reject('您权限不足,请联系系统管理员')
57.             }
58.             commit('SET_BUTTS', butt)
59.             commit('SET_ROLES', key)
60.             commit('SET_USERNAME', username)
61.             commit('SET_AVATAR', avatar)
62.             commit('SET_EMAIL', email)
63.             commit('SET_REALNAME', realname)
64.             commit('SET_DEPARTMENT_TITLE', department_title)
65.             commit('SET_GRADE_TITLE', grade_title)
66.             commit('SET_ROLENAME', rolename)
67.             resolve(key)
68.         }).catch(error => {
69.             reject(error)
70.         })
71.     })
72. },

复制代码

三、获取登录账号菜单信息对接

       获取菜单这块，需要更改两部分，第一部分就是路由修改，第二部分才是菜单转换成路由
        1、路由修改

                在根目次下src文件夹下route文件夹下，修改index.js文件，代码如下

1. import Vue from 'vue'
2. import Router from 'vue-router'
4. /* Layout */
5. import Layout from '@/layout'
7. Vue.use(Router)
9. /**
10. * Note: sub-menu only appear when route children.length >= 1
11. * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
12. *
13. * hidden: true                   if set true, item will not show in the sidebar(default is false)
14. * alwaysShow: true               if set true, will always show the root menu
15. *                                if not set alwaysShow, when item has more than one children route,
16. *                                it will becomes nested mode, otherwise not show the root menu
17. * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
18. * name:'router-name'             the name is used by <keep-alive> (must set!!!)
19. * meta : {
20.     roles: ['admin','editor']    control the page roles (you can set multiple roles)
21.     title: 'title'               the name show in sidebar and breadcrumb (recommend set)
22.     icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
23.     noCache: true                if set true, the page will no be cached(default is false)
24.     affix: true                  if set true, the tag will affix in the tags-view
25.     breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
26.     activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
27.   }
28. */
30. /**
31. * constantRoutes
32. * a base page that does not have permission requirements
33. * all roles can be accessed
34. */
35. export const constantRoutes = [
36.   {
37.     path: '/redirect',
38.     component: Layout,
39.     hidden: true,
40.     children: [
41.       {
42.         path: '/redirect/:path(.*)',
43.         component: () => import('@/views/redirect/index')
44.       }
45.     ]
46.   },
47.   {
48.     path: '/login',
49.     component: () => import('@/views/login/index'),
50.     hidden: true
51.   },
52.   {
53.     path: '/404',
54.     component: () => import('@/views/error-page/404'),
55.     hidden: true
56.   },
57.   {
58.     path: '/401',
59.     component: () => import('@/views/error-page/401'),
60.     hidden: true
61.   },
62.   {
63.     path: '/',
64.     component: Layout,
65.     redirect: '/dashboard',
66.     children: [
67.       {
68.         path: 'dashboard',
69.         component: () => import('@/views/dashboard/index'),
70.         name: '首页',
71.         meta: { title: '首页', icon: 'dashboard', affix: true }
72.       }
73.     ]
74.   },
75.   {
76.     path: '/profile',
77.     component: Layout,
78.     redirect: '/profile/index',
79.     hidden: true,
80.     children: [
81.       {
82.         path: 'index',
83.         component: () => import('@/views/profile/index'),
84.         name: 'Profile',
85.         meta: { title: 'Profile', icon: 'user', noCache: true }
86.       }
87.     ]
88.   }
89. ]
91. /**
92. * asyncRoutes
93. * the routes that need to be dynamically loaded based on user roles
94. */
95. export const asyncRoutes = [
96.   // 404 page must be placed at the end !!!
97.   { path: '*', redirect: '/404', hidden: true }
98. ]
100. const createRouter = () => new Router({
101.   // mode: 'history', // require service support
102.   scrollBehavior: () => ({ y: 0 }),
103.   routes: constantRoutes
104. })
106. const router = createRouter()
108. // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
109. export function resetRouter() {
110.   const newRouter = createRouter()
111.   router.matcher = newRouter.matcher // reset router
112. }
114. export default router

复制代码

        2、登录者菜单转换成路由

                在根目次下src文件夹下store文件夹下modules文件夹下，修改permission.js文件，代码如下

1. import {asyncRoutes, constantRoutes} from '@/router'
2. import {getPersonalMenu} from '@/api/common'
3. import {warn} from '@/utils/message'
4. import Layout from '@/layout'
6. /**
7. * Use meta.role to determine if the current user has permission
8. * @param roles
9. * @param route
10. */
11. function hasPermission(roles, route) {
12.     if (route.meta && route.meta.roles) {
13.         return roles.some(role => route.meta.roles.includes(role))
14.     } else {
15.         return true
16.     }
17. }
19. /**
20. * Filter asynchronous routing tables by recursion
21. * @param routes asyncRoutes
22. * @param roles
23. */
24. export function filterAsyncRoutes(routes, roles) {
25.     const res = []
26.     routes.forEach(route => {
27.         const tmp = {...route}
28.         if (hasPermission(roles, tmp)) {
29.             if (tmp.children) {
30.                 tmp.children = filterAsyncRoutes(tmp.children, roles)
31.             }
32.             res.push(tmp)
33.         }
34.     })
36.     return res
37. }
39. const state = {
40.     routes: [],
41.     addRoutes: []
42. }
44. const mutations = {
45.     SET_ROUTES: (state, routes) => {
46.         state.addRoutes = routes
47.         state.routes = constantRoutes.concat(routes)
48.     }
49. }
52. /**
53. * 后台查询的菜单数据拼装成路由格式的数据
54. * @param routes
55. */
56. export function generaMenu(routes, data) {
57.     data.forEach(item => {
58.         const menu = {
59.             path: item.path === '#' ? item.id + '_key' : item.path,
60.             component: item.component === '#' ? Layout : resolve => require([`@/views/${item.component}`], resolve),
61.             hidden: item.is_hidden,
62.             redirect: item.redirect,
63.             children: [],
64.             name: 'menu_' + item.menuname,
65.             alwaysShow: item.always_show,
66.             meta: {
67.                 title: item.title,
68.                 id: item.id,
69.                 icon: item.is_icon === 1 ? item.icon : '',
70.                 /* affix: item.affix,*/
71.                 noCache: item.is_cache
72.             }
73.         }
74.         // 一级路由
75.         if (!item.children && item.pid === 0) {
76.             menu.name = undefined
77.             menu.children = [
78.                 {
79.                     path: item.path,
80.                     component: resolve => require([`@/views/${item.path}`], resolve),
81.                     name: 'menu_' + item.menuname,
82.                     meta: {
83.                         title: item.title,
84.                         icon: item.is_icon === 1 ? item.icon : '',
85.                         noCache: item.is_cache,
86.                         //affix: item.affix
87.                     }
88.                 }
89.             ]
90.         }
91.         // 二级路由
92.         if (item.children) {
93.             generaMenu(menu.children, item.children)
94.         }
95.         routes.push(menu)
96.     })
97. }
99. function filterMenus(localMenus, remoteMenus) {
100.     const res = []
101.     localMenus.forEach(local => {
102.         remoteMenus.forEach(remote => {
103.             if (remote.path === local.path) {
104.                 local.meta.roles = remote.roleSlugs
105.                 if (local.children && remote.children) {
106.                     local.children = filterMenus(local.children, remote.children)
107.                 }
108.                 res.push(local)
109.             }
110.         })
111.     })
112.     return res
113. }
115. const actions = {
116.     generateRoutes({commit, state}, key) {
117.         return new Promise(resolve => {
118.             const loadMenuData = []
119.             getPersonalMenu().then(res => {
120.                 if (res.code === 50034) {
121.                     reject(res.message)
122.                 } else if (res.code === 50000) {
123.                     warn(res.message)
124.                 } else {
125.                     const remoteRoutes = res.data.menu
126.                     Object.assign(loadMenuData, remoteRoutes)
127.                     const tempAsyncRoutes = Object.assign([], asyncRoutes)
128.                     generaMenu(tempAsyncRoutes, loadMenuData)
129.                     let accessedRoutes
130.                     /*if (key == 'admin') {
131.                         accessedRoutes = tempAsyncRoutes || []
132.                     } else {
133.                         accessedRoutes = filterAsyncRoutes(tempAsyncRoutes, key)
134.                     }*/
135.                     accessedRoutes = filterAsyncRoutes(tempAsyncRoutes, key)
136.                     commit('SET_ROUTES', accessedRoutes)
137.                     resolve(accessedRoutes)
138.                 }
139.             }).catch(error => {
140.                 reject(error)
141.             })
142.         })
143.     }
144. }
146. export default {
147.     namespaced: true,
148.     state,
149.     mutations,
150.     actions
151. }

复制代码

四、提前说明

        此时就已经可以登录到体系内里去了，效果如下图。来日诰日将完成个人资料页面、退出及后端过期退出主动更新数据库的退出数据。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。