記一次Vue.js混入mixin的使用(分權(quán)限管理頁面)
需求背景：在一個后臺的管理系統(tǒng)中，不同的用戶角色對應(yīng)不同的用戶權(quán)限。現(xiàn)要求，同一個頁面對有操作權(quán)限的用戶來說是可操作的，對無操作權(quán)限的用戶來說是只讀的，即操作按鈕均失效。系統(tǒng)用Vue.js開發(fā)。
一、mixin的概念
官方文檔這么說：混入是一種分發(fā)Vue組件中可服用功能的非常靈活的方式?；烊雽ο罂梢园我饨M件選項。當(dāng)組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。
我自己的理解：混入對象具有Vue組件可以聲明的所有選項，如[components]、[computed]、[methods]等；當(dāng)組件使用混入對象時，該組件也同時擁有了混入對象的選項。
二、思路
按照開篇寫的需求描述，如果用一般的方法，我們通常會在每個頁面的vue文件中，判斷當(dāng)前用戶是否具有操作該頁面的權(quán)限，根據(jù)判斷結(jié)果來展示頁面。然而，這種方法會導(dǎo)致大量代碼的重復(fù)，徒然增加了一些無意義的工作量。因此，需要有一個可以復(fù)用的方法。
故此，我們可以把上述的可復(fù)用的辦法放在混入對象的選項當(dāng)中。
三、代碼展示
在混入對象的computed選項中，我們有這幾個方法，來判斷用戶所擁有的的‘編輯'、‘查看'、‘刪除'等權(quán)限。
computed: {
allowedToCreate() {
return this.hasOperatePermissions('createRole');
},
allowedToEdit() {
return this.hasOperatePermissions('editRole');
},
allowedToCheckIn() {
return this.hasOperatePermissions('checkInRole');
},
allowedToDelete() {
return this.hasOperatePermissions('deleteRole');
},
},
注意，如果普通組件中引用了混入對象，那么這些計算屬性會自動成為組件的計算屬性。具體如何創(chuàng)建一個混入對象，并且引入該混入對象，這里不細講，可參考官方文檔。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家分享一篇Vue修改mint-ui默認樣式的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本篇文章主要介紹了vue組件jsx語法的具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
Vue Vine實現(xiàn)一個文件中寫多個組件的方法(最近很火)
Vue Vine提供了全新Vue組件書寫方式,主要的賣點是可以在一個文件里面寫多個vue組件,Vue Vine是一個vite插件,vite解析每個模塊時都會觸發(fā)插件的transform鉤子函數(shù),本文介紹Vue Vine是如何實現(xiàn)一個文件中寫多個組件,感興趣的朋友一起看看吧2024-07-07
這篇文章主要介紹了Vue使用el-dialog關(guān)閉后重置表單方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
下面小編就為大家分享一篇在vue中實現(xiàn)圖片和文件上傳的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue 本地環(huán)境跨域請求proxyTable的方法
今天小編就為大家分享一篇vue 本地環(huán)境跨域請求proxyTable的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue通過自定義指令實現(xiàn)內(nèi)容替換的示例代碼
這篇文章主要介紹了利用Vue通過自定義指令實現(xiàn)內(nèi)容替換的方法,通過Vue.directive指令定義函數(shù)來實現(xiàn)內(nèi)容自定義,通過指令定義函數(shù)的三個鉤子函數(shù)（inserted、componentUpdated、unbind）來實現(xiàn)自定義內(nèi)容的掛載、更新和銷毀,需要的朋友可以參考下2025-03-03
vue中的<template>標(biāo)簽與react中的<></>標(biāo)簽區(qū)別詳解
這篇文章主要為大家介紹了vue中的<template>標(biāo)簽與react中的<></>標(biāo)簽區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
Vue中el-form標(biāo)簽中的自定義el-select下拉框標(biāo)簽功能
這篇文章主要介紹了Vue中el-form標(biāo)簽中的自定義el-select下拉框標(biāo)簽功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
這篇文章主要介紹了vue服務(wù)端渲染操作,結(jié)合簡單實例形式分析了vue.js服務(wù)端渲染操作的原理、實現(xiàn)方法及相關(guān)操作注意事項,需要的朋友可以參考下2019-08-08