記一次Vue.js混入mixin的使用(分權(quán)限管理頁(yè)面)
需求背景：在一個(gè)后臺(tái)的管理系統(tǒng)中，不同的用戶(hù)角色對(duì)應(yīng)不同的用戶(hù)權(quán)限?，F(xiàn)要求，同一個(gè)頁(yè)面對(duì)有操作權(quán)限的用戶(hù)來(lái)說(shuō)是可操作的，對(duì)無(wú)操作權(quán)限的用戶(hù)來(lái)說(shuō)是只讀的，即操作按鈕均失效。系統(tǒng)用Vue.js開(kāi)發(fā)。
一、mixin的概念
官方文檔這么說(shuō)：混入是一種分發(fā)Vue組件中可服用功能的非常靈活的方式。混入對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用混入對(duì)象時(shí)，所有混入對(duì)象的選項(xiàng)將被混入該組件本身的選項(xiàng)。
我自己的理解：混入對(duì)象具有Vue組件可以聲明的所有選項(xiàng)，如[components]、[computed]、[methods]等；當(dāng)組件使用混入對(duì)象時(shí)，該組件也同時(shí)擁有了混入對(duì)象的選項(xiàng)。
二、思路
按照開(kāi)篇寫(xiě)的需求描述，如果用一般的方法，我們通常會(huì)在每個(gè)頁(yè)面的vue文件中，判斷當(dāng)前用戶(hù)是否具有操作該頁(yè)面的權(quán)限，根據(jù)判斷結(jié)果來(lái)展示頁(yè)面。然而，這種方法會(huì)導(dǎo)致大量代碼的重復(fù)，徒然增加了一些無(wú)意義的工作量。因此，需要有一個(gè)可以復(fù)用的方法。
故此，我們可以把上述的可復(fù)用的辦法放在混入對(duì)象的選項(xiàng)當(dāng)中。
三、代碼展示
在混入對(duì)象的computed選項(xiàng)中，我們有這幾個(gè)方法，來(lái)判斷用戶(hù)所擁有的的‘編輯'、‘查看'、‘刪除'等權(quán)限。
computed: {
allowedToCreate() {
return this.hasOperatePermissions('createRole');
},
allowedToEdit() {
return this.hasOperatePermissions('editRole');
},
allowedToCheckIn() {
return this.hasOperatePermissions('checkInRole');
},
allowedToDelete() {
return this.hasOperatePermissions('deleteRole');
},
},
注意，如果普通組件中引用了混入對(duì)象，那么這些計(jì)算屬性會(huì)自動(dòng)成為組件的計(jì)算屬性。具體如何創(chuàng)建一個(gè)混入對(duì)象，并且引入該混入對(duì)象，這里不細(xì)講，可參考官方文檔。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了基于Vue實(shí)現(xiàn)拖拽效果,文中給大家介紹了clientY pageY screenY layerY offsetY的區(qū)別講解，需要的朋友可以參考下2018-04-04
這篇文章主要介紹了Vue獲取頁(yè)面元素的相對(duì)位置的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
vue中$set的使用(結(jié)合在實(shí)際應(yīng)用中遇到的坑)
這篇文章主要介紹了vue中$set的使用(結(jié)合在實(shí)際應(yīng)用中遇到的坑),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
這篇文章主要介紹了vue-test-utils初使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue分頁(yè)查詢(xún)?cè)趺磳?shí)現(xiàn)
這篇文章主要介紹了Vue分頁(yè)查詢(xún)?cè)趺磳?shí)現(xiàn)，使用vue實(shí)現(xiàn)分頁(yè)的邏輯并不復(fù)雜，接收后端傳輸過(guò)來(lái)的數(shù)據(jù)，然后根據(jù)數(shù)據(jù)的總數(shù)和每一頁(yè)的數(shù)據(jù)量就可以計(jì)算出一共可以分成幾頁(yè)2023-04-04
Element-plus封裝搜索組件的實(shí)現(xiàn)
在后臺(tái)管理系統(tǒng)中,經(jīng)常需要在多個(gè)頁(yè)面中使用搜索功能,本文就來(lái)介紹一下Element-plus封裝搜索組件的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08
elementUI vue this.$confirm 和el-dialog 彈出框 移動(dòng) 示例demo
這篇文章主要介紹了elementUI vue this.$confirm 和el-dialog 彈出框 移動(dòng) 示例demo，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
在Vue中實(shí)現(xiàn)文件預(yù)覽與打印的代碼示例
在Vue應(yīng)用中，有時(shí)我們需要實(shí)現(xiàn)文件預(yù)覽和打印的功能，比如，我們可能需要預(yù)覽并打印PDF文件、圖片文件等，本文將介紹如何在Vue中實(shí)現(xiàn)文件預(yù)覽和打印的功能，并提供相應(yīng)的代碼示例2023-06-06
這篇文章主要介紹了vue-cli3 引入 font-awesome的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
el-table?表格分頁(yè)序號(hào)問(wèn)題小結(jié)
這篇文章主要介紹了el-table?表格分頁(yè)序號(hào)問(wèn)題小結(jié),本文通過(guò)實(shí)例代碼圖文效果展示給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-04-04