欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue自定義權限標簽詳細代碼示例

 更新時間：2023年09月15日 11:19:52   作者：ByCode  
這篇文章主要給大家介紹了關于vue自定義權限標簽的相關資料,在Vue中你可以通過創(chuàng)建自定義組件來實現(xiàn)自定義標簽組件,文中給出了詳細的代碼示例,需要的朋友可以參考下

技術棧

  • vuex
  • vue自定義標簽

開門見山

1、創(chuàng)建directive

hasPermi.js

 /**
 * v-hasPermi 操作權限處理
 */
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(`請設置操作權限標簽值`)
    }
  }
}

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) => {
                // 獲取權限信息(請求后臺數(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、按鈕標簽

 <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['btn:delete']"
          >刪除
          </el-button>

說明：

如果后臺接口返回的按鈕權限數(shù)據(jù)里包含btn:delete則刪除按鈕顯示，否則不顯示

后臺返回數(shù)據(jù)如下：

[
  "btn:list", 
  "btn:add", 
  "btn:delete", 
  "btn:edit"
]

總結 

到此這篇關于vue自定義權限標簽的文章就介紹到這了,更多相關vue自定義權限標簽內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關文章

最新評論