近期在搞一个会议健康申报系统时，要搞一个后台，用到了vue-element-admin模板，使用的是PanJianChen(源码地址：https://github.com/PanJiaChen/vue-admin-template)
第一步：当前是下载源码了，下载地址：https://github.com/PanJiaChen/vue-admin-template
第二步：修改登录页面，登录接口（/store/modules/admin.js/login()），根据实际情况修改用户信息接口(/store/modules/admin.js/getInfo())
第三步：修改权限路由
1.删减路由文件中的配置，export const constantRoutes保留基本的/login、/404
2.动态路由清空，export const asyncRoutes=[]
3./store/modules/permission.js下定义生成路由方法
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 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 {
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()
}
}
})然后你就可心情地玩了。
到此这篇关于vue-element-admin搭建后台管理系统的实现步骤的文章就介绍到这了,更多相关vue-element-admin搭建后台管理系统内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
