Vue 指令实现按钮级别权限管理

jubincn 发布于2019-08-23 17:05 / 3216人阅读

在项目中经常有需求要根据用户的权限对界面上的元素进行控制，这里介绍了一直简单的实现，仅供参考。

当前用户的权限列表储存在 store 里，也可以是其他地方。

指令

// src/directives/permission.js
import Vue from "vue";
import store from "@/store";
import {get} from "@/utils";

// 是否有权限
const hasPermission = userPermission => {
    let userPermissionList = Array.isArray(userPermission) ? userPermission : [userPermission];
    // 当前用户的权限列表
    let permissionList = get(store, "getters["user/permission"]", []);
    return userPermissionList.some(e => permissionList.includes(e));
};

// 指令
Vue.directive("per", {
    bind: (el, binding, vnode) => {
        if (!hasPermission(binding.value)) {
            el.parentNode.removeChild(el);
        }
    }
});

// 全局判断方法
Vue.prototype.$_has = hasPermission;

使用方法

在 mian.js 引入


    admin 可见
    是否为admin：{{$_has("admin")}}   //true

本文作者： Shellming
本文链接： shellming.com/2019/04/23/vue-permission/
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！

GPU云服务器云服务器指令实现 VUE实现webrtc Vue实现分页 Java?权限??菜单按钮?

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103780.html

Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述

摘要：简介最近写了一个基于权限管理系统的后台模板，包含了正常项目开发所需的框架功能，开发者使用的时候只需要专注于项目的业务逻辑就好。同时接下来会让你拥有一个自己完全掌控的框架。简介最近写了一个基于vue2.0+element-ui权限管理系统的后台模板，包含了正常项目开发所需的框架功能，开发者使用的时候只需要专注于项目的业务逻辑就好。同时接下来会让你拥有一个自己完全掌控的框架。源码地址...

_ivan 2019-08-23 14:06 评论0 收藏0
sSpring Boot多模块+ Shiro + Vue：前后端分离登陆整合，权限认证（一）

摘要：前言本文主要使用来实现前后端分离的认证登陆和权限管理，适合和我一样刚开始接触前后端完全分离项目的同学，但是你必须自己搭建过前端项目和后端项目，本文主要是介绍他们之间的互通，如果不知道这么搭建前端项目的同学可以先找别的看一下。前言本文主要使用spring boot + shiro + vue来实现前后端分离的认证登陆和权限管理，适合和我一样刚开始接触前后端完全分离项目的同学，但是你必...

macg0406 2019-08-19 11:38 评论0 收藏0
手摸手，带你用vue撸后台系列二(登录权限篇)

摘要：我们将登录按钮上绑上事件，点击登录之后向服务端提交账号和密码进行验证。所以前端和后端权限的划分是不太一致。侧边栏最后一个涉及到权限的地方就是侧边栏，不过在前完整项目地址：vue-element-admin 系列文章：手摸手，带你用vue撸后台系列一（基础篇）手摸手，带你用vue撸后台系列二(登录权限篇) 手摸手，带你用vue撸后台系列三 (实战篇) 手摸手，带你用vu...

不知名网友 2019-08-20 16:45 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

Tecode 2019-08-23 16:02 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

APICloud 2019-08-02 14:34 评论0 收藏0