详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
126 浏览量
2020-10-19
05:43:00
上传
评论
收藏 73KB PDF 举报
详解利用详解利用 Vue.js 实现前后端分离的实现前后端分离的RBAC角色权限管理角色权限管理
本篇文章主要介绍了利用 Vue.js 实现前后端分离的RBAC角色权限管理，非常具有实用价值，需要的朋友可以
参考下
项目背景：物业管理后台，不同角色拥有不同权限
采用技术：Vue.js + Vuex + Element UI
实现 RBAC 权限管理需要后端接口支持，这里仅提供前端解决方案。
因代码篇幅较大，对代码进行了删减，文中 “...” 即为省略的一部分代码。
大致思路：大致思路：
首先登录成功后，从后台拉取用户当前可显示的菜单和可用权限列表，分别将其存入 store 的 nav（菜单导航） 和 auth（用
户可用权限） 中，在用户切换路由时，判断是否存在 auth ，如果不存在，则重新获取，判断当前访问地址 to.meta.alias 是否
在用户可用权限列表中，如果不存在，则提示无权限，否则进入路由。
1. 路由与侧边菜单分离路由与侧边菜单分离
侧边菜单相关代码 Main.vue
<template>
<!-- ... -->
<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
<!--导航菜单-->
<el-menu :default-active="$route.path"
class="el-menu-vertical-aliyun"
@open="handleopen"
@close="handleclose"
@select="handleselect"
:collapse="collapsed"
unique-opened router>
<template v-for="(item,index) in nav">
<!-- 二级菜单 -->
<el-submenu :index="index+''"
v-if="item.children && item.children.length > 0">
<!-- 二级菜单顶级 -->
<template slot="title">
<i :class="['icon',item.iconCls]"></i>
<span slot="title">{{item.name}}</span>
</template>
<!-- 二级菜单下级 -->
<el-menu-item-group>
<!--<span slot="title">{{item.name}}</span>-->
<!-- && child.url-->
<template v-for="child in item.children">
<!--无三级菜单-->
<el-menu-item
:index="child.url"
:key="child.url"
v-if="!child.children">
{{child.name}}
</el-menu-item>
<!--有三级菜单-->
<el-submenu
:index="child.url"
:key="child.url"
v-if="child.children">
<span slot="title">{{child.name}}</span>
<el-menu-item v-for="subChild in child.children"
:index="subChild.url"
:key="subChild.url">
{{subChild.name}}
</el-menu-item>
</el-submenu>
</template>
</el-menu-item-group>
</el-submenu>
<!-- 一级菜单 -->
<el-menu-item v-if="!item.children"
:index="item.url">
<i :class="['icon',item.iconCls]"></i>
<span slot="title">{{item.name}}</span>
</el-menu-item>
</template>
资源评论
