Vue 指令實(shí)現(xiàn)按鈕級(jí)別權(quán)限管理

jubincn 發(fā)布于2019-08-23 17:05 / 3214人閱讀

摘要：在項(xiàng)目中經(jīng)常有需求要根據(jù)用戶的權(quán)限對(duì)界面上的元素進(jìn)行控制，這里介紹了一直簡(jiǎn)單的實(shí)現(xiàn)，僅供參考。指令是否有權(quán)限當(dāng)前用戶的權(quán)限列表指令全局判斷方法使用方法在引入可見(jiàn)是否為本文作者本文鏈接版權(quán)聲明本博客所有文章除特別聲明外，均采用許可協(xié)議。

在項(xiàng)目中經(jīng)常有需求要根據(jù)用戶的權(quán)限對(duì)界面上的元素進(jìn)行控制，這里介紹了一直簡(jiǎn)單的實(shí)現(xiàn)，僅供參考。

當(dāng)前用戶的權(quán)限列表儲(chǔ)存在 store 里，也可以是其他地方。

指令

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

// 是否有權(quán)限
const hasPermission = userPermission => {
    let userPermissionList = Array.isArray(userPermission) ? userPermission : [userPermission];
    // 當(dāng)前用戶的權(quán)限列表
    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 可見(jiàn)
    是否為admin：{{$_has("admin")}}   //true

本文作者： Shellming
本文鏈接： shellming.com/2019/04/23/vue-permission/
版權(quán)聲明： 本博客所有文章除特別聲明外，均采用 CC BY-NC-SA 3.0 許可協(xié)議。轉(zhuǎn)載請(qǐng)注明出處！

云服務(wù)器 GPU云服務(wù)器指令實(shí)現(xiàn) VUE實(shí)現(xiàn)webrtc Vue實(shí)現(xiàn)分頁(yè) Java?權(quán)限??菜單按鈕?

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/103780.html

相關(guān)文章

Vue2.0 + ElementUI 手寫(xiě)權(quán)限管理系統(tǒng)后臺(tái)模板（一）——簡(jiǎn)述

摘要：簡(jiǎn)介最近寫(xiě)了一個(gè)基于權(quán)限管理系統(tǒng)的后臺(tái)模板，包含了正常項(xiàng)目開(kāi)發(fā)所需的框架功能，開(kāi)發(fā)者使用的時(shí)候只需要專注于項(xiàng)目的業(yè)務(wù)邏輯就好。同時(shí)接下來(lái)會(huì)讓你擁有一個(gè)自己完全掌控的框架。簡(jiǎn)介最近寫(xiě)了一個(gè)基于vue2.0+element-ui權(quán)限管理系統(tǒng)的后臺(tái)模板，包含了正常項(xiàng)目開(kāi)發(fā)所需的框架功能，開(kāi)發(fā)者使用的時(shí)候只需要專注于項(xiàng)目的業(yè)務(wù)邏輯就好。同時(shí)接下來(lái)會(huì)讓你擁有一個(gè)自己完全掌控的框架。源碼地址...

_ivan 2019-08-23 14:06 評(píng)論0 收藏0
sSpring Boot多模塊+ Shiro + Vue：前后端分離登陸整合，權(quán)限認(rèn)證（一）

摘要：前言本文主要使用來(lái)實(shí)現(xiàn)前后端分離的認(rèn)證登陸和權(quán)限管理，適合和我一樣剛開(kāi)始接觸前后端完全分離項(xiàng)目的同學(xué)，但是你必須自己搭建過(guò)前端項(xiàng)目和后端項(xiàng)目，本文主要是介紹他們之間的互通，如果不知道這么搭建前端項(xiàng)目的同學(xué)可以先找別的看一下。前言本文主要使用spring boot + shiro + vue來(lái)實(shí)現(xiàn)前后端分離的認(rèn)證登陸和權(quán)限管理，適合和我一樣剛開(kāi)始接觸前后端完全分離項(xiàng)目的同學(xué)，但是你必...

macg0406 2019-08-19 11:38 評(píng)論0 收藏0
手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇)

摘要：我們將登錄按鈕上綁上事件，點(diǎn)擊登錄之后向服務(wù)端提交賬號(hào)和密碼進(jìn)行驗(yàn)證。所以前端和后端權(quán)限的劃分是不太一致。側(cè)邊欄最后一個(gè)涉及到權(quán)限的地方就是側(cè)邊欄，不過(guò)在前完整項(xiàng)目地址：vue-element-admin 系列文章：手摸手，帶你用vue擼后臺(tái) 系列一（基礎(chǔ)篇）手摸手，帶你用vue擼后臺(tái) 系列二(登錄權(quán)限篇) 手摸手，帶你用vue擼后臺(tái) 系列三 (實(shí)戰(zhàn)篇) 手摸手，帶你用vu...

不知名網(wǎng)友 2019-08-20 16:45 評(píng)論0 收藏0
VUE知識(shí)點(diǎn)集錦

摘要：載入前后在階段，實(shí)例的和都初始化了，但還是掛載之前為虛擬的節(jié)點(diǎn)，還未替換。類(lèi)似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個(gè)...

Tecode 2019-08-23 16:02 評(píng)論0 收藏0
VUE知識(shí)點(diǎn)集錦

摘要：載入前后在階段，實(shí)例的和都初始化了，但還是掛載之前為虛擬的節(jié)點(diǎn)，還未替換。類(lèi)似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理：答：VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個(gè)...

APICloud 2019-08-02 14:34 評(píng)論0 收藏0