Vue 指令實現按鈕級別權限管理

jubincn 發布于2019-08-23 17:05 / 3220人閱讀

在項目中經常有需求要根據用戶的權限對界面上的元素進行控制，這里介紹了一直簡單的實現，僅供參考。

當前用戶的權限列表儲存在 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?權限??菜單按鈕?

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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