vue自定義權(quán)限標(biāo)簽

技術(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ù)如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-559565.html

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

到了這里，關(guān)于vue自定義權(quán)限標(biāo)簽的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！