Recently, when I was working on a conference health declaration system, I needed to build a backend and used the vue-element-admin template. I used PanJianChen (source code address: https://github.com/PanJiaChen/vue-admin-template) The first step: Download the source code, download address: https://github.com/PanJiaChen/vue-admin-template Step 2: Modify the login page, login interface (/store/modules/admin.js/login()), and modify the user information interface (/store/modules/admin.js/getInfo()) according to the actual situation Step 3: Modify the permission routing 1. Delete the configuration in the routing file, export const constantRoutes to retain the basic /login, /404 2. Dynamic routing is cleared, export const asyncRoutes=[] 3. Define the generated routing method in /store/modules/permission.js /** * The menu data queried in the background is assembled into data in routing format* @param routes */ export function generaMenu(routes, data) { data.forEach(item => { let menu = { path: item.url, children: [], name: 'menu_' + item.id, meta: { title: item.name, id: item.id ,icon:item.icon} } // console.log(item.url.indexOf('dashboard')) // console.log(item.children) if (item.children) { // console.log(item.children.length) if (item.children.length > 0) { menu.redirect = item.children[0].url menu.component = Layout } else { // menu.component = () => import(`@/views${item.url}/index`) menu.component = () => Promise.resolve(require(`@/views${item.url}`).default) } if (item.url && item.url.indexOf('dashboard') != -1) { menu = { path: '/', component: Layout, redirect: '/dashboard', children: [{ path: 'dashboard', name: 'Dashboard', component: () => import('@/views/dashboard/index'), meta: { title: 'Dashboard', icon: 'dashboard' } }] } } generaMenu(menu.children, item.children) } else { console.log('no children') } routes.push(menu) }) } Load dynamic routing in actions according to the background interface actions: { GenerateRoutes({ commit }, data) { return new Promise(resolve => { const loadMenuData = [] getAuthMenu().then(res => { let data = res.data console.log('menu=>', data) console.log('asyncRoutes=>>', asyncRoutes) let newRoutes = [] //Clear the previous routes hereObject.assign(loadMenuData, data) generaMenu(newRoutes, loadMenuData) newRoutes.push({ path: '*', redirect: '/404', hidden: true }) let accessedRouters = newRoutes || [] console.log('accessedRouters', accessedRouters) commit('SET_ROUTERS', accessedRouters) resolve() }) }) }, reset_routers({ commit }) { return new Promise(resolve => { commit('RESET_ROUTERS') resolve() }) } } Step 4. Add dynamic routing in /permission.js router.beforeEach(async (to, from, next) => { // start progress bar NProgress.start() // set page title document.title = getPageTitle(to.meta.title) // determine whether the user has logged in 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('admin/getInfo') store.dispatch('GenerateRoutes', {}).then(() => { // Generate an accessible routing table router.addRoutes(store.getters.addRouters) // Dynamically add an accessible routing table console.log('to=',store.getters.addRouters) next({ ...to, replace: true }) // hack method to ensure that addRoutes is completed, set the replace: true so the navigation will not leave a history record NProgress.done() }) // next() } catch (error) { // remove token and go to login page to re-login await store.dispatch('admin/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() } } }) Then you can play as you like. This is the end of this article about the implementation steps of vue-element-admin to build a backend management system. For more relevant vue-element-admin to build a backend management system, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Solve the problem of not finding NULL from set operation to mysql not like
Preface var is a way to declare variables in ES5....
1. Statistics of PV and IP Count the PV (Page Vie...
A composite index (also called a joint index) is ...
1. First check whether the system has mysql insta...
1. Vue--The first vue-cli program The development...
What are :is and :where? :is() and :where() are p...
<iframe src="./ads_top_tian.html" all...
This article uses an example to illustrate how to...
1. RPM version installation Check if there are ot...
This article uses examples to describe MySQL pess...
Table of contents Requirement Description Problem...
Table of contents 1. Location / Matching 2. Locat...
Using win docker-desktop, I want to connect to co...
clear:both is used to清除浮動This is the impression I...
1》Be good at web design 2》Know how to design web p...