Ant Design Pro of Vue方案一权限路由配置(一步步完成,包括所有后端数据库代码,萌新向)
参考了许多csdn的文章,感谢大家为社区做的贡献,我也来汇总一波,谢谢😊
首先,给大家看看后端数据库(萌新,建库太拉大佬勿喷)
然后就是第二张表:
这个userRole(我这里默认都是普通用户,所有没涉及角色表,直接0,1区分了,也还没考虑管理员,所以就先只输入了普通用户即把第二张表的 userRole都设为 0 了😁) 负责与两张表关联,permission,就是用户可以访问路由列表(位于前端的 src/config/router.config.js 中)
举个栗子:
把他们(permission)放到第二张表里面就可以了。
前端
1、 把 /src/store/index.js 中的引入改一下(如果要使用官网的方案一)
2、来到 /src/permissions.js(注意别进错,打开src就能看到)
pro版本更迭可能这里(router.beforeEach)会不一样,我在这附上我用的代码
router.beforeEach((to, from, next) => {
NProgress.start() // start progress bar
to.meta && typeof to.meta.title !== 'undefined' && setDocumentTitle(`${i18nRender(to.meta.title)} - ${domTitle}`)
/* has token */
const token = storage.get(ACCESS_TOKEN)
if (token) {
if (to.path === loginRoutePath) {
next({ path: defaultRoutePath })
NProgress.done()
} else {
// 检验用户的权限表是否为空,我们这里从零开始,他会直接判空并向下执行
if (store.getters.roles.length === 0) {
// 请求并获取用户登录信息
store
.dispatch('GetInfo')
.then(res => {
const roles = res.data.permissions
store.dispatch('GenerateRoutes', { roles }).then(() => {
//根据 roles 权限生成可访问的路由表
//动态添加路由表
router.addRoutes(store.getters.addRouters)
const redirect = decodeURIComponent(from.query.redirect || to.path)
if (to.path === redirect) {
next({...to, replace: true})
} else {
next({path: redirect})
}
})
})
.catch(() => {
notification.error({
message: '错误',
description: '请求用户信息失败,请重试'
})
// 失败时,获取用户信息失败时,调用登出,来清空历史保留信息
store.dispatch('Logout').then(() => {
next({ path: loginRoutePath, query: { redirect: to.fullPath } })
})
})
} else {
next()
}
}
} else {
if (allowList.includes(to.name)) {
// 在免登录名单,直接进入
next()
} else {
next({ path: loginRoutePath, query: { redirect: to.fullPath } })
NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it
}
}
})
注意第 15 行 会调用 GetInfo ,
3、来到 /src/store/modules/user.js,找到 GetInfo 方法
这是我的代码
他会调用 getInfo() 方法请求后端返回数据
GetInfo({ commit }) {
return new Promise((resolve, reject) => {
//发起请求获取用户信息
getInfo().then(response => {
const user = response.data
console.log('流程2-获取到个人信息')
、、这些暂时不用我就先注掉了
// if (result.userRole && result.role.permissions.length > 0) {
// //获取不同模块下的权限
// const role = result.role
// role.permissions = result.role.permissions
// //返回一个新的 role 实例
// role.permissions.map(per => {
// if (per.actionEntitySet != null && per.actionEntitySet.length > 0) {
// const action = per.actionEntitySet.map(action => {
// return action.action
// })
// per.actionList = action
// }
// })
// role.permissionList = role.permissions.map(permission => {
// return permission.permissionId
// })
//
//注意这里 userRole 一定要有,不然会死循环(好像是)
commit('SET_ROLES', user.userRole)
commit('SET_INFO', user)
// } else {
// reject(new Error('getInfo: roles must be a non-null array !'))
// }
commit('SET_NAME', { name: user.userName, welcome: welcome() })
commit('SET_AVATAR', user.avatarUrl)
resolve(response)
}).catch(error => {
reject(error)
})
})
},
这里我附带一个我的(主要对应我的代码)前端请求,后端返回的数据格式
这里自己实现就可以了,方法有很多
4、回到 src/permission.js 文件,此时 GetInfo 会将后端返回的数据放到 res(响应) 里面,我们取出data中的permissions const roles = res.data.permissions
,然后,调用 GenerateRoutes
5、进入 /src/store/modules/permission.js 可以看到 GenerateRoutes 方法会 收集到后端返回的 permissions,然后取一份完全的路由模板 routerMap ,进行对比过滤,执行 filterAsyncRouter()
,
我的 filterAsyncRouter()
function filterAsyncRouter(routerMap, roles) {
const accessedRouters = routerMap.filter(route => {
// console.log('########$$$$$$$routerMap',roles)
if (hasPermission(roles, route)) {
if (route.children && route.children.length) {
route.children = filterAsyncRouter(route.children, roles)
}
return true
}
return false
})
return accessedRouters
}
过滤完之后,至此,就可以访问到路由并进入首页了
我也是新手,如果有错误的地方、问题,欢迎评论,谢谢大家