vue-element-admin搭建後臺管理系統的實現步驟
阿新 • • 發佈:2021-10-20
近期在搞一個會議健康申報系統時,要搞一個後臺,用vZGOok到了-element-admin模板,使用的是PanJianChen(原始碼地址:https://.com/PanJiaChen/vue-admin-template)
第一步:當前是下載原始碼了,下載地址:https://github.com/PanJiaChen/vue-admin-template
第二步:修改登入頁面,登入介面(/store/modules/admin./login()),根據實際情況修改使用者資訊介面(/store/modules/admin.js/getInfo())
第三步:修改許可權路由
1.刪減路由檔案中的配置,export const constantRoutes保留基本的/login、/404
2.動態路由清空,export const asyncRoutes=[]
3./store/modules/permission.js下定義生成路由方法
/** * 後臺查詢的選單資料拼裝成路由格式的資料 * @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: '控制檯',icon: 'dashboard' } }] } } generaMenu(menu.children,item.children) } else { console.log('沒有children') } routes.push(menu) }) }
actions中根據後臺的介面載入動態路由
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 = []//此處清空之前的路由 Object.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() }) } }
第四步、在/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(() => { // 生成可訪問的路由表 router.addRoutes(store.getters.addRouters) // 動態新增可訪問路由表 console.log('to=',store.getters.addRouters) next({ ...to,replace: true }) // hack方法 確保addRoutes已完成,set the replachttp://www.cppcns.come: 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') www.cppcns.com 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 permissiowww.cppcns.comn to access are redirected to the login page. next(`/login?redirect=${to.path}`) NProgress.done() } } })
然後你就可心情地玩了。
到此這篇關於vue-element-admin搭建後臺管理系統的實現步驟的文章就介紹到這了,更多相關vue-element-admin搭建後臺管理系統內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!