一、 菜单权限
- 菜单权限:控制用户在系统中能够看到哪些菜单项
- 菜单权限指的就是后台系统中的左侧的菜单栏,前端可以根据后端接口返回的权限数据结合element-ui菜单组件循环拼接而成即可,有什么权限就展示什么菜单
- 通过vuex+持久化插件(本地存储)解决刷新页面菜单栏不显示问题
- 实现退出登录功能时,通过
clear()
方法清除本地数据,跳转后通过window.location.reload()
刷新当前页面,可实现清除vuex数据的操作
二、 路由权限
- 路由权限为了防止用户恶意通过在地址栏输入地址发生强行跳转,可以通过动态路由对用户权限做出相关限制,有权限则跳转,无权限则跳转404页面
- 路由权限的方法需要在两个时机调用
initDynamicRoutes
,分别是登录成功时和页面创建时,否则动态路由为默认值,刷新无法访问
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '@/layout'
import store from '@/store'
Vue.use(VueRouter)
const tableRule = {
path: '/table',
name: 'table',
component: () => import('@/views/table/index.vue')
}
const imageRule = {
path: '/image',
name: 'image',
component: () => import('@/views/image')
}
const userRule = {
path: '/users',
name: 'users',
component: () => import('@/views/users')
}
const ruleMapping = {
table: tableRule,
users: userRule,
image: imageRule
}
const routes = [
{
path: '/login',
component: () => import('@/views/login')
},
{
path: '/',
component: Layout,
children: [
{
path: '',
component: () => import('@/views/home')
},
{
path: '/chart',
component: () => import('@/views/chart')
}
]
}
]
const router = new VueRouter({
routes
})
const rightList = [
{
id: 1,
authName: "基本页面",
icon: "el-icon-connection",
children: [
{
id: 11,
authName: "表格页面",
icon: "el-icon-s-grid",
path: "table",
rights: ["view", "edit", "add", "delete"]
},
{
id: 12,
authName: "素材页面",
icon: "el-icon-s-marketing",
path: "image",
rights: ["view", "edit", "add", "delete"]
}
]
},
{
id: 2,
authName: "用户权限",
icon: "el-icon-set-up",
children: [
{
id: 21,
authName: "权限页面",
icon: "el-icon-s-custom",
path: "users",
rights: ["view", "edit", "add", "delete"]
}
]
}
];
export function initDynamicRoutes () {
const currentRoutes = router.options.routes
rightList.forEach(item => {
if (item.path) {
const temp = ruleMapping[item.path]
temp.meta = item.rights
currentRoutes[1].children.push(temp)
}
item.children.forEach(item => {
const temp = ruleMapping[item.path]
temp.meta = item.rights
currentRoutes[1].children.push(temp)
})
})
router.addRoutes(currentRoutes)
}
export default router
三、 按钮权限
- 所谓的按钮权限是指在某个菜单的界面中,我们需要根据后端返回的该角色当前操作模块中对应的按钮权限数据,展示出可进行操作的按钮,比如删除,修改,增加等按钮.
-
- 如果要实现按钮的权限控制,我们需要使用vue的自定义指令去实现: 首先需要创建一个按钮权限控制的指令,我们定义这个指令的名称为:
v-permission
-
- 在这个指令的内部获取到当前用户的按钮权限(vuex|本地缓存中)数据
-
- 在通过
binding.value
获取到自定义制定属性值的数据
-
- 判断从
vuex|本地缓存
中获取到的按钮权限数据是否包含了自定义指令包含的权限
-
- 如果不包含,我们在设置
el.style.display = “none”
,或者使用el.parentNode.removeChild(el)
删除当前 按钮元素
<el-button v-permission="[$route.path, 'add']">添加</el-button>
directives: {
permission: {
inserted(el, bind) {
let value = bind.value
let rules = {
'/menu': ['add', 'edit'],
"/user": [ 'edit', 'remove'],
"/goods": ['add']
}
let allow = rules[value[0]]
if (!allow.includes(value[1])) {
el.style = "display:none"
}
}
}
}
四 、 数据权限
数据权限
就是不同的角色用户看到的表格数据是不一样的
- 比如张三是项目经理就可以看到某一个业务表格中的所有数据和字段信息
- 李四是普通员工只能看到表格中自己的数据
- 代码实现: 前端在请求头统一封装,携带用户信息,最后由后端检测该用户权限解析返回对应的数据即可;
import axios from 'axios'
import router from '@/router'
const request = axios.create()
const actionMapping = {
get: 'view',
post: 'add',
put: 'edit',
delete: 'delete'
}
request.interceptors.request.use(req => {
if (req.url !== '/login' && req.url !== '/roles') {
const action = actionMapping[req.method]
const currentRight = router.currentRoute.meta
if (currentRight && currentRight.indexOf(action) === -1) {
alert('没有权限')
return Promise.reject(new Error('没有权限'))
}
}
return req
})
export default request