記一次Vue.js混入mixin的使用(分權(quán)限管理頁(yè)面)
需求背景：在一個(gè)后臺(tái)的管理系統(tǒng)中，不同的用戶角色對(duì)應(yīng)不同的用戶權(quán)限。現(xiàn)要求，同一個(gè)頁(yè)面對(duì)有操作權(quán)限的用戶來(lái)說(shuō)是可操作的，對(duì)無(wú)操作權(quán)限的用戶來(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)前用戶是否具有操作該頁(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)判斷用戶所擁有的的‘編輯'、‘查看'、‘刪除'等權(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修改mint-ui默認(rèn)樣式的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
本篇文章主要介紹了vue組件jsx語(yǔ)法的具體使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
Vue Vine實(shí)現(xiàn)一個(gè)文件中寫(xiě)多個(gè)組件的方法(最近很火)
Vue Vine提供了全新Vue組件書(shū)寫(xiě)方式,主要的賣(mài)點(diǎn)是可以在一個(gè)文件里面寫(xiě)多個(gè)vue組件,Vue Vine是一個(gè)vite插件,vite解析每個(gè)模塊時(shí)都會(huì)觸發(fā)插件的transform鉤子函數(shù),本文介紹Vue Vine是如何實(shí)現(xiàn)一個(gè)文件中寫(xiě)多個(gè)組件,感興趣的朋友一起看看吧2024-07-07
這篇文章主要介紹了Vue使用el-dialog關(guān)閉后重置表單方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
下面小編就為大家分享一篇在vue中實(shí)現(xiàn)圖片和文件上傳的示例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue 本地環(huán)境跨域請(qǐng)求proxyTable的方法
今天小編就為大家分享一篇vue 本地環(huán)境跨域請(qǐng)求proxyTable的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue通過(guò)自定義指令實(shí)現(xiàn)內(nèi)容替換的示例代碼
這篇文章主要介紹了利用Vue通過(guò)自定義指令實(shí)現(xiàn)內(nèi)容替換的方法,通過(guò)Vue.directive指令定義函數(shù)來(lái)實(shí)現(xiàn)內(nèi)容自定義,通過(guò)指令定義函數(shù)的三個(gè)鉤子函數(shù)（inserted、componentUpdated、unbind）來(lái)實(shí)現(xiàn)自定義內(nèi)容的掛載、更新和銷(xiāo)毀,需要的朋友可以參考下2025-03-03
vue中的<template>標(biāo)簽與react中的<></>標(biāo)簽區(qū)別詳解
這篇文章主要為大家介紹了vue中的<template>標(biāo)簽與react中的<></>標(biāo)簽區(qū)別詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vue中el-form標(biāo)簽中的自定義el-select下拉框標(biāo)簽功能
這篇文章主要介紹了Vue中el-form標(biāo)簽中的自定義el-select下拉框標(biāo)簽功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04
vue服務(wù)端渲染操作簡(jiǎn)單入門(mén)實(shí)例分析
這篇文章主要介紹了vue服務(wù)端渲染操作,結(jié)合簡(jiǎn)單實(shí)例形式分析了vue.js服務(wù)端渲染操作的原理、實(shí)現(xiàn)方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-08-08