vue添加按钮权限

vue添加按钮权限

功能：不同的账户登录看到的按钮是不同的

1.在头部组件请求接口获取权限信息

import { getPurview } from "@/server/api/power"; //导入已将封装好的接口哦
// 获取功能权限信息
 async getPurviewData (path) {
   const res = await getPurview({ resources: path });
      if (res.data.code == 200) {
        if (res.data.data.permissions) {
          sessionStorage.setItem('usePermissions', JSON.stringify(res.data.data.permissions));
        } else {
          sessionStorage.removeItem("usePermissions");
        }
      } else {
        sessionStorage.removeItem("usePermissions");
        this.$message.error(res.data.msg);
      }
},

mounted () {
    this.getPurviewData(this.$route.path);
 }

2.在头部组件监听路由变化

watch: { // 监听
    '$route' (to, from) {
      this.getPurviewData(to.path);
      console.log(to, from, '=== $route ===');
    }
  },

3.在main.js中封装全局方法

Vue.prototype.$power = function (code) {
  let data = JSON.parse(sessionStorage.getItem('usePermissions'));
  return !!data.find(item => item.permissionCode === code);
};

4.在页面中使用

<el-link v-show="$power('user_add')" class="newBuiltButton" type="primary" @click="addList">新建</el-link>