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