vue自定義權(quán)限標(biāo)簽詳細(xì)代碼示例
技術(shù)棧
- vuex
- vue自定義標(biāo)簽
開(kāi)門(mén)見(jiàn)山
1、創(chuàng)建directive

hasPermi.js
/**
* v-hasPermi 操作權(quán)限處理
*/
import store from '@/store'
export default {
inserted(el, binding, vnode) {
const { value } = binding
const all_permission = "*:*:*";
const permissions = store.getters && store.getters.permissions
if (value && value instanceof Array && value.length > 0) {
const permissionFlag = value
const hasPermissions = permissions.some(permission => {
return all_permission === permission || permissionFlag.includes(permission)
})
if (!hasPermissions) {
el.parentNode && el.parentNode.removeChild(el)
}
} else {
throw new Error(`請(qǐng)?jiān)O(shè)置操作權(quán)限標(biāo)簽值`)
}
}
}index.js
import hasPermi from './permission/hasPermi'
const install = function(Vue) {
Vue.directive('hasPermi', hasPermi)
}
if (window.Vue) {
window['hasPermi'] = hasPermi
Vue.use(install); // eslint-disable-line
}
export default install2、store

user.js
import {getPermissions} from "@/api/token/assets";
import async from "async";
const user = {
state: {
permissions: []
},
mutations: {
SET_PERMISSIONS: (state, permissions) => {
state.permissions = permissions
}
},
actions: {
// 獲取用戶(hù)信息
GetInfo({commit}, query) {
return new Promise((resolve, reject) => {
// 獲取權(quán)限信息(請(qǐng)求后臺(tái)數(shù)據(jù)接口)
getPermissions(query).then(res => {
if ( res.code == 200 ) {
commit('SET_PERMISSIONS', res.data)
}
resolve(res)
}).catch(error => {
reject(error)
})
})
}
}
}
export default usergetters.js
const getters = {
token: state => state.user.token,
permissions: state => state.user.permissions
}
export default gettersindex.js
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
user
},
getters
})
export default store3、src目錄下創(chuàng)建permission.js
import router from './router'
import store from './store'
import { Message } from 'element-ui'
router.beforeEach((to, from, next) => {
// to.query 獲取url路由請(qǐng)求參數(shù),傳遞給后端使用
store.dispatch('GetInfo',to.query).then(() => {
next()
}).catch(err => {
Message.error(err)
})
})4、src下的main.js使用
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import directive from './directive' // directive
import store from './store'
import './permission' // permission control
Vue.use(ElementUI)
Vue.use(directive)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')5、按鈕標(biāo)簽
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['btn:delete']"
>刪除
</el-button>說(shuō)明:
如果后臺(tái)接口返回的按鈕權(quán)限數(shù)據(jù)里包含btn:delete則刪除按鈕顯示,否則不顯示
后臺(tái)返回?cái)?shù)據(jù)如下:
[ "btn:list", "btn:add", "btn:delete", "btn:edit" ]
總結(jié)
到此這篇關(guān)于vue自定義權(quán)限標(biāo)簽的文章就介紹到這了,更多相關(guān)vue自定義權(quán)限標(biāo)簽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue.js實(shí)現(xiàn)價(jià)格計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)價(jià)格計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08
vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問(wèn)題解決方法
這篇文章主要介紹了vue+springboot前后端分離實(shí)現(xiàn)單點(diǎn)登錄跨域問(wèn)題的解決方法,需要的朋友可以參考下2018-01-01
使用vue自定義如何實(shí)現(xiàn)Tree組件和拖拽功能
這篇文章主要介紹了使用vue自定義如何實(shí)現(xiàn)Tree組件和拖拽功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12
vue組件值變化但不刷新強(qiáng)制組件刷新的問(wèn)題
這篇文章主要介紹了vue組件值變化但不刷新強(qiáng)制組件刷新的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06
VueTreeselect?參數(shù)options的數(shù)據(jù)轉(zhuǎn)換-參數(shù)normalizer解析
這篇文章主要介紹了VueTreeselect?參數(shù)options的數(shù)據(jù)轉(zhuǎn)換-參數(shù)normalizer解析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07
vue-cli項(xiàng)目?jī)?yōu)化方法- 縮短首屏加載時(shí)間
這篇文章主要介紹了vue-cli項(xiàng)目?jī)?yōu)化 縮短首屏加載時(shí)間,需要的朋友可以參考下2018-04-04

