VUE3 自定义标签/v-if 按钮权限控制

1、自定义标签

  使用了：vue3directive
  把数据放在store中，在切换路由时（单点嵌入），也可以在登陆时加载Store数据；
  加载数据JS如下

export function getUserBtnInfo() {
   let createUser= "";
   if (window.parent.getUserName) {
     createUser=window.parent.getUserName();
  }
   return new Promise((resolve, reject) => {
   request({
    url: '/web/userButton/getButtonList/' + createUser,
    method: 'POST'
  }).then((res) => {
            if(res.code === 200) {
              console.log(res)
              //设置到store中
              store.dispatch('setName', res.data)
            }
        });
      })
}

store 代码

import { createStore } from 'vuex'
import request from '@/utils/request'
const btns = ""



const state = "aaa"
console.log(state)
export default createStore({
  state: {
    permissionBtns:state
  },
  mutations: {
    SET_USER: (state, userInfo) => {
      state.permissionBtns = userInfo
    },
    RESET_USER: (state) => {
        state.permissionBtns = []
    }
  },
  actions: {
    setName(context, value){
      // 修改getname的值
      context.commit('SET_USER',value)
    },
  },
  modules: {
  }
})

切换路由时，加载store数据；（我这边是单个菜单集成进去，放在路由比较合适，如果正常项目登陆的时候加载一次就ok了）

路由js处下方加入如下代码

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

// 路由拦截   全局路由守卫  权限控制，前端路由守卫控制，登录才可以访问
 router.beforeEach((to, from, next) => {
  getUserBtnInfo();
  //store.dispatch('setName', "2566622")
  //commit('SET_USER', userInfo)
  next()
}) 

main js处定义全局方法

const app = createApp(App)
/* app.property.hasPermission = hasPermission */
const _has = val => {
  const isShow = false
   let permissionStr =""
  if (store.state.permissionBtns === undefined || store.state.permissionBtns == null) {
    return isShow
  }else{
    permissionStr =store.state.permissionBtns.toString();
  }
  if (permissionStr.indexOf(val) > -1) {
    return true
  } 
  return isShow
}

app.config.globalProperties.$hasPermissions = hasPermissions
app.directive('permission', {
	mounted(el, binding) {
       if (!_has(binding.value))
		/* if (!store.state.role[binding.value]) */ {
			el.parentNode && el.parentNode.removeChild(el)
		} 
	}
})

页面使用： v-permission="‘add-3qry’"
以上是自定义标签；

v-if：由于自定义标签在如下代码中使用报错：

  <el-table-column label="操作" fixed="right" width="200">
            <template #default="scope">
            //报错，应该是由于dom取到的层级报错，未解决因此用了v-if辅助解决
              <el-tooltip content="编辑" v-permission="'add-3qry'" placement="bottom" effect="light">
                <a class="blue font-s16" @click="toUpdate(scope.row.id)"
                  ><i class="el-icon-edit"></i
                ></a>
              </el-tooltip>
              <el-tooltip content="删除" placement="bottom" effect="light">
                <a  @click="toDelete(scope.row.id)" class="red"
                  ><i class="iconfont icon-i9"></i
                ></a>
              </el-tooltip>
            </template>
          </el-table-column>

js代码如下：新建has.js

import store from '@/store'


 function hasPermission(permission){
  const isShow = false
  let permissionStr =""
 if (store.state.permissionBtns === undefined || store.state.permissionBtns == null) {
   return isShow
 }else{
   permissionStr =store.state.permissionBtns.toString();
 }
 if (permissionStr.indexOf(permission) > -1) {
   return true
 } 
 return isShow
} 

export default {
  hasPermission
}

数据和自定义标签也是路由加载store方式；

自定义全局变量

import hasPermissions from "@/utils/has";
app.config.globalProperties.$hasPermissions = hasPermissions

页面

 <el-table-column label="操作" fixed="right" width="200">
          <template #default="scope">
            <el-tooltip v-if="hasPer('add-1qry')"  content="查看详情" placement="bottom" effect="light">
              <a class="blue font-s16" @click="getTaskLogDetail(scope.row)"
                ><i class="el-icon-tickets"></i
              ></a>
            </el-tooltip>
          </template>
        </el-table-column>



//js处
 hasPer(val){
      return this.$hasPermissions.hasPermission(val)
    },