vue前端菜单权限实现思路

权限实现思路

前端记录所有路由，通过角色动态控制。

前端在 router/index.js 中，定义出所有页面的路由，在每个 router 节点上，我们给增加一个角色属性。

用户在登录系统后，后端返回的用户信息中，就有用户的角色。前端需要判断每个路由节点的 role 数组中，是否包含这个角色，如果包含，就保留此router，否则就过滤掉。最后前端只需要将过滤完成后的路由展示在页面上即可。

实现步骤

后端返回用户角色，例如admin、user

前端根据角色判断是否展示菜单—菜单增加role角色属性实现，例如：

{
  path: "/usermanage",
  name: "用户管理",
  icon: "User",
  component: Layout,
  meta:{title:"用户管理",role:['admin']},
  children: [
     {
      path: '/usermanage/user',
      name: "用户管理",
      meta:{title:"用户管理",role:['admin']},
      component: () => import('../views/user/User')
    },
  ]
 }

前端根据角色判断是否有权限访问路由—路由导航守卫实现

const token = window.sessionStorage.getItem('token');
if(token) {
     //判断当前用户角色是否有权限访问
    if (to.meta.role){
        //获取当前用户的角色
        let userRole = window.sessionStorage.getItem('role'); // 获取用户角色，默认1或2
        let UserRole = userRole === '1' ? 'admin' : 'user'; //获取用户角色名称
        //to.meta.role 允许的角色列表，['admin','user']
        let allowRoleList = to.meta.role;
        if(allowRoleList.indexOf(UserRole) === -1){
            next({name: '首页'}); //如果角色没有权限跳转到首页
        }else {
          next(); //如果角色有权限则正常跳转
        }
    }else {
      next(); //如果没配置菜单权限则正常跳转
    }
} else {
  return next('/login') // 如果没有token则跳转到登录页
}

前端根据角色判断是否展示页面按钮->写全局函数实现或定义指令来判断

页面按钮权限

方式一：写一个全局函数来判断，是否有权限，然后在页面使用v-if来显示

新建权限文件 src/permission/permission.js

export function hasPermission (role) {
    let userRole = window.sessionStorage.getItem('role'); // 获取用户角色，默认1或2
    let UserRole = userRole === '1' ? 'admin' : 'user'; //获取用户角色名称
   return role.includes(UserRole);
}

导入模块

<script>
    import {hasPermission} from "@/permission/permission";
</script>

定义方法

methods: {
 //检查角色是否有权限
 checkPermission(role) {
   return hasPermission(role);
 },
}

页面使用

<el-button type="danger" plain size="small"  v-if="checkPermission(['admin'])" >删除</el-button>

方式二：自定义指令v-permission="([‘admin’])"这种自定义指令来判断是否显示。

新建指令文件 src/directives/permission.js

export default {
    mounted(el,bindings){
     let userRole = window.sessionStorage.getItem('role'); // 获取用户角色，默认1或2
     let UserRole = userRole === '1' ? 'admin' : 'user'; //获取用户的角色
     //获取允许的角色列表
     let allRoleList = bindings.value;
     //判断当前的角色是否在允许的角色列表内，如果不在则不加载
     if(allRoleList.indexOf(UserRole) === -1){
         //删除元素
         el.parentNode && el.parentNode.removeChild(el);
        }
    }
}

新建src/directives/index.js 注册指令

import permission from "@/directives/permission";

//批量注册指令
const directives= {
    permission
}

//注册的一般写法，循环遍历directives，通过vue.directive注册
export default {
    install(Vue){
        Object.keys(directives).forEach(key =>{
            Vue.directive(key, directives[key])
        })
    }
}

main.js全局注册

import directives from "@/directives"; //导入自定义指令

app.use(directives)  //注册自定义指令

页面使用自定义指令

<el-button type="danger" plain size="small"  v-permission="(['admin'])" >删除</el-button>