网站的制作建站人,班级网站的规划与建设,软件开发公司推荐,大理住房和城乡建设局网站一、总结 其实程序开发到现在#xff0c;简单的后端框架就只剩下获取登录账号信息及获取登录账号菜单这两个功能咯。详细见下图#xff1a; 1、未登录时总业务流程图 2、登录后总业务流程图 二、获取登录账号信息对接 在根目录下src文件夹下store文件夹下modules文件夹下的us…一、总结 其实程序开发到现在简单的后端框架就只剩下获取登录账号信息及获取登录账号菜单这两个功能咯。详细见下图 1、未登录时总业务流程图 2、登录后总业务流程图 二、获取登录账号信息对接 在根目录下src文件夹下store文件夹下modules文件夹下的user.js文件中修改代码如下
const state {token: getToken(),username: ,avatar: ,email: ,realname: ,department_title: ,grade_title: ,rolename: ,roles: [],butts: []
}const mutations {SET_TOKEN: (state, token) {state.token token},SET_EMAIL: (state, email) {state.email email},SET_USERNAME: (state, username) {state.username username},SET_AVATAR: (state, avatar) {state.avatar avatar},SET_REALNAME: (state, realname) {state.realname realname},SET_DEPARTMENT_TITLE: (state, department_title) {state.department_title department_title},SET_GRADE_TITLE: (state, grade_title) {state.grade_title grade_title},SET_ROLENAME: (state, rolename) {state.rolename rolename},SET_BUTTS: (state, butts) {state.butts butts},SET_ROLES: (state, roles) {state.roles roles}
}
// get user info
getInfo({commit, state}) {return new Promise((resolve, reject) {getInfo().then(response {const {data} responseif (!data) {reject(验证失败请重新登录。)}const { butt, key, username, avatar, email, realname, department_title, grade_title, rolename } dataif (!butt || butt.length 0) {reject(您权限不足,请联系系统管理员)}commit(SET_BUTTS, butt)commit(SET_ROLES, key)commit(SET_USERNAME, username)commit(SET_AVATAR, avatar)commit(SET_EMAIL, email)commit(SET_REALNAME, realname)commit(SET_DEPARTMENT_TITLE, department_title)commit(SET_GRADE_TITLE, grade_title)commit(SET_ROLENAME, rolename)resolve(key)}).catch(error {reject(error)})})
},
三、获取登录账号菜单信息对接 获取菜单这块需要更改两部分第一部分就是路由修改第二部分才是菜单转换成路由 1、路由修改 在根目录下src文件夹下route文件夹下修改index.js文件代码如下
import Vue from vue
import Router from vue-router/* Layout */
import Layout from /layoutVue.use(Router)/*** Note: sub-menu only appear when route children.length 1* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html** hidden: true if set true, item will not show in the sidebar(default is false)* alwaysShow: true if set true, will always show the root menu* if not set alwaysShow, when item has more than one children route,* it will becomes nested mode, otherwise not show the root menu* redirect: noRedirect if set noRedirect will no redirect in the breadcrumb* name:router-name the name is used by keep-alive (must set!!!)* meta : {roles: [admin,editor] control the page roles (you can set multiple roles)title: title the name show in sidebar and breadcrumb (recommend set)icon: svg-name/el-icon-x the icon show in the sidebarnoCache: true if set true, the page will no be cached(default is false)affix: true if set true, the tag will affix in the tags-viewbreadcrumb: false if set false, the item will hidden in breadcrumb(default is true)activeMenu: /example/list if set path, the sidebar will highlight the path you set}*//*** constantRoutes* a base page that does not have permission requirements* all roles can be accessed*/
export const constantRoutes [{path: /redirect,component: Layout,hidden: true,children: [{path: /redirect/:path(.*),component: () import(/views/redirect/index)}]},{path: /login,component: () import(/views/login/index),hidden: true},{path: /404,component: () import(/views/error-page/404),hidden: true},{path: /401,component: () import(/views/error-page/401),hidden: true},{path: /,component: Layout,redirect: /dashboard,children: [{path: dashboard,component: () import(/views/dashboard/index),name: 首页,meta: { title: 首页, icon: dashboard, affix: true }}]},{path: /profile,component: Layout,redirect: /profile/index,hidden: true,children: [{path: index,component: () import(/views/profile/index),name: Profile,meta: { title: Profile, icon: user, noCache: true }}]}
]/*** asyncRoutes* the routes that need to be dynamically loaded based on user roles*/
export const asyncRoutes [// 404 page must be placed at the end !!!{ path: *, redirect: /404, hidden: true }
]const createRouter () new Router({// mode: history, // require service supportscrollBehavior: () ({ y: 0 }),routes: constantRoutes
})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
}export default router2、登录者菜单转换成路由 在根目录下src文件夹下store文件夹下modules文件夹下修改permission.js文件代码如下
import {asyncRoutes, constantRoutes} from /router
import {getPersonalMenu} from /api/common
import {warn} from /utils/message
import Layout from /layout/*** Use meta.role to determine if the current user has permission* param roles* param route*/
function hasPermission(roles, route) {if (route.meta route.meta.roles) {return roles.some(role route.meta.roles.includes(role))} else {return true}
}/*** Filter asynchronous routing tables by recursion* param routes asyncRoutes* param roles*/
export function filterAsyncRoutes(routes, roles) {const res []routes.forEach(route {const tmp {...route}if (hasPermission(roles, tmp)) {if (tmp.children) {tmp.children filterAsyncRoutes(tmp.children, roles)}res.push(tmp)}})return res
}const state {routes: [],addRoutes: []
}const mutations {SET_ROUTES: (state, routes) {state.addRoutes routesstate.routes constantRoutes.concat(routes)}
}/*** 后台查询的菜单数据拼装成路由格式的数据* param routes*/
export function generaMenu(routes, data) {data.forEach(item {const menu {path: item.path # ? item.id _key : item.path,component: item.component # ? Layout : resolve require([/views/${item.component}], resolve),hidden: item.is_hidden,redirect: item.redirect,children: [],name: menu_ item.menuname,alwaysShow: item.always_show,meta: {title: item.title,id: item.id,icon: item.is_icon 1 ? item.icon : ,/* affix: item.affix,*/noCache: item.is_cache}}// 一级路由if (!item.children item.pid 0) {menu.name undefinedmenu.children [{path: item.path,component: resolve require([/views/${item.path}], resolve),name: menu_ item.menuname,meta: {title: item.title,icon: item.is_icon 1 ? item.icon : ,noCache: item.is_cache,//affix: item.affix}}]}// 二级路由if (item.children) {generaMenu(menu.children, item.children)}routes.push(menu)})
}function filterMenus(localMenus, remoteMenus) {const res []localMenus.forEach(local {remoteMenus.forEach(remote {if (remote.path local.path) {local.meta.roles remote.roleSlugsif (local.children remote.children) {local.children filterMenus(local.children, remote.children)}res.push(local)}})})return res
}const actions {generateRoutes({commit, state}, key) {return new Promise(resolve {const loadMenuData []getPersonalMenu().then(res {if (res.code 50034) {reject(res.message)} else if (res.code 50000) {warn(res.message)} else {const remoteRoutes res.data.menuObject.assign(loadMenuData, remoteRoutes)const tempAsyncRoutes Object.assign([], asyncRoutes)generaMenu(tempAsyncRoutes, loadMenuData)let accessedRoutes/*if (key admin) {accessedRoutes tempAsyncRoutes || []} else {accessedRoutes filterAsyncRoutes(tempAsyncRoutes, key)}*/accessedRoutes filterAsyncRoutes(tempAsyncRoutes, key)commit(SET_ROUTES, accessedRoutes)resolve(accessedRoutes)}}).catch(error {reject(error)})})}
}export default {namespaced: true,state,mutations,actions
}四、提前说明 此时就已经可以登录到系统里面去了结果如下图。明天将完成个人资料页面、退出及后端过期退出自动更新数据库的退出数据。
