RBAC权限

RBAC权限

介绍:

英文全称: Role-Based Access Control

中文全称: 基于角色的权限访问控制

介绍: 在RBAC中,权限与角色关联 ,用户通过成为适当角色的成员而得到这些角色的权限. 权限赋予角色,角色又赋予用户,并且他们之间是多对多的关系,这样管理起来就会很方便

使用场景

需要添加权限的情景示例:

• 不同用户登录后看到的菜单是不一样的。
• 不同用户看到的页面效果不一样，有的用户可以看见”授权”按钮,或有的用户可以看见”删除”按钮
• 不同用户完成的功能是不一样的，有的用户可以执行删除,有的可以执行新增.

管理员和普通用户被授予不同的权限，普通用户只能去修改和查看个人信息，而不能创建创建用户和冻结用户，而管理员由于被授予所有权限，所以可以做所有操作。

如何在vue中使用页面级权限

如何在vue项目中使用页面权限

把所有的动态路由放到一个数组里面

router页面

export const asyncRoutes = [
    {
        path: '/approvals',
        component: Layout,
        // redirect: '/dashboard',
        children: [{
            path: '',
            name: 'approvals',
            component: () => import('@/views/approvals/approvals.vue'),
            meta: { title: '审批', icon: 'tree-table' }
                   }]
    },
    
    ...以下有许多动态路由
]

在权限控制页面permission.js

//使用路由注入把动态路由注入到页面中
if (token) {
    if (to.path === '/login') {
        // 有token的情况下访问login页面直接跳转到主页
        next('/')
        NProgress.done()
    } else {
        // 获取用户信息
        if (!store.getters.userId) { // 没有userId的时候发起请求 请求用户信息
            const menus = await store.dispatch('user/getUserInfo')
            // 过滤出用户有权限访问的页面
            const filterRoutes = asyncRoutes.filter(route => {
                const routeName = route.children[0].name
                return menus.includes(routeName)
            })
//404页面必须放在路由的末尾 因为path是全局匹配的------------------------------------------------------------------------------------------------
            filterRoutes.push({ path: '*', redirect: '/404', hidden: true })
            // 动态添加可以访问的路由设置
            router.addRoutes(filterRoutes)
            // 把动态路由提交到menu和静态路由进行组装 之后一起放到sidebar进行路由的渲染
            store.commit('menu/setMenuList', filterRoutes)
 //解决刷新出现的白屏bug ----------------------------------------------------------------------------------------------------------         
            next({ ...to, replace: true })
        }
        // 访问其他页面正常跳转
        next()
    }
} else {
    //   没有token
    if (whiteList.includes(to.path)) {
        // 访问不需要token的页面正常跳转
        next()
    } else {
        // 访问需要token的页面 回到登录页
        next('/login')
        NProgress.done()
    }
}

退出的登录 需要重置路由

// 重置路由
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // 重新设置路由的可匹配路径
}

按钮级别的权限控制

main.js

// 注册一个全局自定义指令 `v-allow`
Vue.directive('allow', {
  inserted: function(el, binding) {
    // 从vuex中取出points,
    const points = store.state.user.userInfo.roles.points
    // 如果points有binding.value则显示
    if (points.includes(binding.value)) {
      // console.log('判断这个元素是否会显示', el, binding.value)
    } else {
      el.parentNode.removeChild(el)
      // el.style.display = 'none'
    }
  }
})

使用

<el-button
 v-allow="'import_employee'"
>
    导入excel
</el-button>

定义全局检测的方法:

Vue.prototype.$checkPoint = function(pointKey) {
  if (store.state.user.userInfo.roles.points) {
    // 进行权限点判断
    return store.state.user.userInfo.roles.points.includes(pointKey)
  }
  // 没有权限点POINTS信息, 说明用户没有身份, 没有任何权限
  return false
}

在模板中通过if来控制按钮显示

<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-button v-if="$checkPoint('CKGZ')">查看工资</el-button>
      </el-card>
    </div>
  </div>
</template>

$checkPoint中的参数以系统中权限点的标识符为准。