成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

jubincn / 3223人閱讀

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

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

當前用戶的權(quán)限列表儲存在 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];
    // 當前用戶的權(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 可見
    是否為admin：{{$_has("admin")}}   //true

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103780.html

相關(guān)文章

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

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

    _ivan 評論0 收藏0

  • sSpring Boot多模塊+ Shiro + Vue：前后端分離登陸整合，權(quán)限認證（一）

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

    macg0406 評論0 收藏0

  • 手摸手，帶你用vue擼后臺 系列二(登錄權(quán)限篇)

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

    不知名網(wǎng)友 評論0 收藏0

  • VUE知識點集錦

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

    Tecode 評論0 收藏0

  • VUE知識點集錦

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

    APICloud 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<