vue页面权限控制及操作级权限控制

第一种

前端将公共部分的路由直接写在前端代码中，其余部分前端开发完成后，将对应路由复制一份给后端根据权限匹配存储在数据库中，用户登录时，从后端数据库中根据用户权限读取对应路由返回给前端，再添加到前端路由中动态渲染上。

这样操作，需要前后端密切配合，而且页面中的操作级权限不能控制；

第二种

在路由的meta属性中增加 roles字段，用来存储可访问当前路由的权限，在路由全局守卫router.beforeEach中进行拦截处理，示例如下：

路由信息

routes: [
    {
        path: '/login',
        name: 'login',
        meta: {
            roles: ['admin', 'user']
        },
        component: () => import('../components/Login.vue')
    },
    {
        path: 'home',
        name: 'home',
        meta: {
            roles: ['admin']
        },
        component: () => import('../views/Home.vue')
    },
]

页面控制

// 假设角色有两种：admin 和 user
// 这里是从后台获取的用户角色
const role = 'user'
// 在进入一个页面前会触发 router.beforeEach 事件
router.beforeEach((to, from, next) => {
    if (to.meta.roles.includes(role)) {
        next()
    } else {
        next({path: '/404'})
    }
})

第三种，通过自定义指令实现操作级权限控制

自定义指令文档参见： vue官网-自定义指令

自定义指令有几个钩子函数，其中 inserted 满足要求，在插入父节点之前可以在这里进行操作，满足权限控制要求

钩子函数参数如下：

代码示例

定义指令


// 获取用户角色, 接口返回或者cookie中获取
function getRole() {
  return 'admin'
}

// 注册一个全局自定义指令 `v-role`
Vue.directive('role', {
  inserted: (el, binding, vnode) => {
    // 从自定义指令中获取当前指令允许的权限
    let roles = binding.value;

    // 获取当前用户权限
    let role = getRole();

    // 如果没有权限就移除此节点
    if (!roles.includes(role)) {
      el.parentNode.removeChild(el);
    }
  }
})

使用示例

<template>
  <div>
    <div v-role="['user', 'admin', 'superAdmin']">user</div>
    <div v-role="['admin', 'superAdmin']">admin</div>
    <div v-role="['superAdmin']">superAdmin</div>
  </div>
</template>

这样，就能根据用户权限，完成操作级别权限控制。

vue页面权限控制及操作级权限控制

猜你喜欢