vue自定義權(quán)限標(biāo)簽詳細(xì)代碼示例
技術(shù)棧
- vuex
- vue自定義標(biāo)簽
開門見山
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(`請設(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 install
2、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: { // 獲取用戶信息 GetInfo({commit}, query) { return new Promise((resolve, reject) => { // 獲取權(quán)限信息(請求后臺數(shù)據(jù)接口) getPermissions(query).then(res => { if ( res.code == 200 ) { commit('SET_PERMISSIONS', res.data) } resolve(res) }).catch(error => { reject(error) }) }) } } } export default user
getters.js
const getters = { token: state => state.user.token, permissions: state => state.user.permissions } export default getters
index.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 store
3、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路由請求參數(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>
說明:
如果后臺接口返回的按鈕權(quán)限數(shù)據(jù)里包含btn:delete則刪除按鈕顯示,否則不顯示
后臺返回數(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
laravel-admin 與 vue 結(jié)合使用實例代碼詳解
由于 Laravel-admin 采用的是 pjax 的方式刷新頁面,意味著很多頁面刷新的操作,這篇文章主要介紹了laravel-admin 與 vue 結(jié)合使用,需要的朋友可以參考下2019-06-06Vue結(jié)合openlayers按照經(jīng)緯度坐標(biāo)實現(xiàn)錨地標(biāo)記及繪制多邊形區(qū)域
OpenLayers是一個用于開發(fā)WebGIS客戶端的JavaScript包,最初基于BSD許可發(fā)行。OpenLayers是一個開源的項目,其設(shè)計之意是為互聯(lián)網(wǎng)客戶端提供強大的地圖展示功能,包括地圖數(shù)據(jù)顯示與相關(guān)操作,并具有靈活的擴展機制2022-09-09sortable+element 實現(xiàn)表格行拖拽的方法示例
這篇文章主要介紹了sortable+element 實現(xiàn)表格行拖拽的方法示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-06-06默認(rèn)瀏覽器設(shè)置及vue自動打開頁面的方法
今天小編就為大家分享一篇默認(rèn)瀏覽器設(shè)置及vue自動打開頁面的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue中Npm run build 根據(jù)環(huán)境傳遞參數(shù)方法來打包不同域名
這篇文章主要介紹了vue項目中Npm run build 根據(jù)環(huán)境傳遞參數(shù)方法來打包不同域名,使用npm run build --xxx,根據(jù)傳遞參數(shù)xxx來判定不同的環(huán)境,給出不同的域名配置,具體內(nèi)容詳情大家參考下本文2018-03-03