Vue+Nuxt如何实现后台管理系统的权限控制

最新推荐文章于 2025-01-07 14:49:20 发布

Eva_伊娃

最新推荐文章于 2025-01-07 14:49:20 发布

阅读量3.5k

点赞数

分类专栏： VUE 文章标签： vue

本文链接：https://blog.youkuaiyun.com/u014445517/article/details/90638010

版权

本文介绍了在Vue+Nuxt环境下实现后台管理系统的权限控制方法，包括菜单页面的访问权限和页面内按钮的显示控制。通过创建路由表，结合Vuex进行权限匹配，并在页面中调取权限值，实现动态展示或隐藏页面元素。此外，还通过自定义Vue指令进行按扭权限的判断，确保只有拥有相应权限的用户才能看到或操作特定功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面权限控制分为两种：
菜单中的页面是否能被访问
页面中的按钮（增、删、改）的权限控制是否显示
大致的页面访问权限的流程：

详细实现过程：
1、创建路由表
左侧菜单的列表，我放在vuex中的一个模块js中

直接贴代码routerPermission.js：
state中的permission为模拟的从接口中获取的权限表，slideMenu为左侧导航菜单的列表。
ROUTER_MATCH为路由与权限表匹配，将匹配的值放到相应页面的路由中，然后再在页面中使用。

const user = {
state: {
permission: [
{
‘path’: ‘/active/active’,
permission: [0, 1, 2]
},
{
‘path’: ‘/task/task’,
permission: [1, 2]
},
{
‘path’: ‘/resource/resource’,
permission: [3, 4]
},
{
‘path’: ‘/theme/theme’,
permission: [5, 6]
},
{
‘path’: ‘/organization/org’,
permission: [5, 6]
},
{
‘path’: ‘/organization/authority’,
permission: [5, 6]
}
],
slideMenu: [
{
‘id’: