1.登录成功后，后台返回permissions 数组，localStorage存菜单权限（或者按钮权限）
localStorage.setItem('permissions', (res.permissions || []).join(','))
2.新增判断是否有权限的方法，随便写在哪个js中都可以
export function hasPermissions(path) {
if (path === '/' || path === '/dashboard') { //默认都拥有首页的权限
return true
}
const hasPermissions = localStorage.getItem("permissions") || ''
if (!hasPermissions || hasPermissions === '') { // 为空默认拥有全部权限
return true
}
path = path.replaceAll('//', '/') // 替换调 //
return (hasPermissions.split(',').indexOf(path) > -1)
}
3.菜单权限 sidebar/index.vue
没权限的 hidden = true
routes() {
const rs = this.$router.options.routes
for (let i = 0, li = rs.length; i < li; i++) {
rs[i].hidden = !hasPermissions(rs[i].path)
if (rs[i].children && rs[i].children.length > 0) {
for (let j = 0, lj = rs[i].children.length; j < lj; j++) {
rs[i].children[j].hidden = !hasPermissions(rs[i].path + '/' + rs[i].children[j].path)
}
}
}
return rs
}
4.路由权限 permission.js
适当位置加上 没权限的 跳到首页 （防止直接输入url）
if (!hasPermissions(to.path)) {
next({path: '/'})
NProgress.done()
return
}
以上是菜单权限（菜单是否显示）跟路由权限（防止直接输入url）
5.按钮权限
这个简单了 <el-button v-if='hasPermissions("菜单权限url")' />
vue-admin-template 增加菜单和按钮权限
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 宣传官网 http://xb.exrick.cn 在线Demo http://xboot.exrick.cn 开源...
- https://blog.csdn.net/TCF_JingFeng/article/details/90679308
- 由于element多用来做后端管理界面，所以这里给大家推荐一个用来做后端管理的element框架！（vue-ele...
- 一、用户权限 1. 修改router/index.js文件去掉多余的路由，只留下这两个路由。/404、{ path...
- 前言：本项目是基于网络上大家都比较熟悉的vue-element-template后台项目模版进行开发的。主要实现了...
