uniapp功能权限判断$auth.auth $auth.role显示判断生成源码-阿里云开发者社区

在uniapp中，实现界面元素的条件显示或隐藏，主要依赖于Vue的数据绑定和条件渲染指令。这通常与权限管理不同，因为权限管理更多地关注于应用是否有权访问某些功能或数据，而条件渲染则是基于应用内部的状态或逻辑来决定界面元素的显示状态。

主要就是我们在登录时，要增加用户的权限标识，比如permissions具体到哪个功能按钮权限，roles角色权限。

this.$session.setUser({
 token: '1231231',
 username: '123213',
 permissions:['gongneng1',"gongneng2","gongneng3","gongneng4"],
 roles:['admin']
 })

判断功能权限

功能权限判断核心代码：$auth.auth('某个功能')。

如果你们增加了某个功能权限设置进了我们可以直接在界面显示判断里增加判断增加类似以下代码{{$auth.auth('gongneng1')}}。gongneng1是上面permissions功能标识里其中一个功能。

比如是否具有某个功能权限。

判断角色权限

角色判断核心代码：$auth.role('某个角色')

有些功能可能不需要具体到哪个功能点，只需要判断是否有哪个角色。比如可能有管理员、商家、会员这三种角色，不同角色也是需要显示不同菜单的。我们就可以用$auth.role('admin')。其中里面的admin是roles角色英文标识。

权限判断方法来源

更多$auth相关用法，我们可以打开common/Auth.js里代码实现。然后参照上方的显示判断配置自己的显示功能判断。

代码生成

上方条件设置完成后，我们可以保存源码至本地就可以进行功能权限测试了。

<template>
  <view class="container container23285">
    <view v-if="$auth.role('admin')" class="flex flex-wrap diygw-col-24 flex5-clz">
      <view class="flex diygw-col-12 items-center flex-nowrap flex2-clz">
        <view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center flex7-clz">
          <text class="flex icon2 diygw-col-0 diy-icon-lihe"></text>
        </view>
        <view class="flex flex-wrap diygw-col-0 flex-direction-column flex6-clz">
          <text class="diygw-text-line1 diygw-col-24 text4-clz"> AI编程 </text>
          <text class="diygw-text-line1 diygw-col-24"> 智能编程高效学习 </text>
        </view>
      </view>
      <view class="flex diygw-col-12 items-center flex-nowrap flex-clz">
        <view class="flex flex-wrap diygw-col-0 flex-direction-column justify-center items-center flex1-clz">
          <text class="flex icon7 diygw-col-0 diy-icon-youxi"></text>
        </view>
        <view class="flex flex-wrap diygw-col-0 flex-direction-column flex13-clz">
          <text class="diygw-text-line1 diygw-col-24 text-clz"> AI编程 </text>
          <text class="diygw-text-line1 diygw-col-24"> 智能编程高效学习 </text>
        </view>
      </view>
    </view>
    <view v-if="$auth.auth('gongneng1')" class="flex flex-wrap diygw-col-24 flex11-clz">
      <view class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex12-clz">
        <text class="diygw-text-line1 diygw-col-24 text6-clz diygw-ellipsis"> 订单管理 </text>
        <text class="diygw-text-line1 diygw-col-24 diygw-ellipsis"> 10条 </text>
        <text class="flex icon diygw-col-0 icon-clz diy-icon-goodsnewfill"></text>
      </view>
      <view class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex14-clz">
        <text class="diygw-text-line1 diygw-col-24 text9-clz diygw-ellipsis"> 售后管理 </text>
        <text class="diygw-text-line1 diygw-col-24 diygw-ellipsis"> 10条 </text>
        <text class="flex icon4 diygw-col-0 icon4-clz diy-icon-servicefill"></text>
      </view>
      <view class="flex flex-wrap diygw-col-8 flex-direction-column items-center flex17-clz">
        <text class="diygw-text-line1 diygw-col-24 text7-clz diygw-ellipsis"> 消息管理 </text>
        <text class="diygw-text-line1 diygw-col-24 diygw-ellipsis"> 10条 </text>
        <text class="flex icon5 diygw-col-0 icon5-clz diy-icon-commentfill"></text>
      </view>
    </view>
    <view class="clearfix"></view>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        //用户全局信息
        userInfo: {},
        //页面传参
        globalOption: {},
        //自定义全局变量
        globalData: { isshow: false }
      };
    },
    onShow() {
      this.setCurrentPage(this);
    },
    onLoad(option) {
      this.setCurrentPage(this);
      if (option) {
        this.setData({
          globalOption: this.getOption(option)
        });
      }
 
      this.init();
    },
    methods: {
      async init() {}
    }
  };
</script>
 
<style lang="scss" scoped>
  .flex5-clz {
    padding-top: 10rpx;
    padding-left: 10rpx;
    padding-bottom: 10rpx;
    padding-right: 10rpx;
  }
  .flex2-clz {
    padding-top: 16rpx;
    border-bottom-left-radius: 12rpx;
    padding-left: 16rpx;
    padding-bottom: 16rpx;
    border-top-right-radius: 12rpx;
    margin-right: 10rpx;
    background-color: #f7faff;
    margin-left: 10rpx;
    overflow: hidden;
    width: calc(50% - 10rpx - 10rpx) !important;
    border-top-left-radius: 12rpx;
    margin-top: 10rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 10rpx;
    padding-right: 16rpx;
  }
  .flex7-clz {
    padding-top: 20rpx;
    border-bottom-left-radius: 120rpx;
    color: #3d65ff;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-right-radius: 120rpx;
    background-color: #e2efff;
    flex-shrink: 0;
    overflow: hidden;
    width: 96rpx !important;
    border-top-left-radius: 120rpx;
    border-bottom-right-radius: 120rpx;
    height: 96rpx !important;
    padding-right: 20rpx;
  }
  .icon2 {
    font-size: 52rpx;
  }
  .flex6-clz {
    padding-top: 10rpx;
    flex: 1;
    padding-left: 10rpx;
    padding-bottom: 10rpx;
    padding-right: 10rpx;
  }
  .text4-clz {
    font-weight: bold;
    font-size: 28rpx !important;
  }
  .flex-clz {
    padding-top: 16rpx;
    border-bottom-left-radius: 12rpx;
    padding-left: 16rpx;
    padding-bottom: 16rpx;
    border-top-right-radius: 12rpx;
    margin-right: 10rpx;
    background-color: #f7faff;
    margin-left: 10rpx;
    overflow: hidden;
    width: calc(50% - 10rpx - 10rpx) !important;
    border-top-left-radius: 12rpx;
    margin-top: 10rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 10rpx;
    padding-right: 16rpx;
  }
  .flex1-clz {
    padding-top: 20rpx;
    border-bottom-left-radius: 120rpx;
    color: #9156fd;
    padding-left: 20rpx;
    padding-bottom: 20rpx;
    border-top-right-radius: 120rpx;
    background-color: #f1effd;
    flex-shrink: 0;
    overflow: hidden;
    width: 96rpx !important;
    border-top-left-radius: 120rpx;
    border-bottom-right-radius: 120rpx;
    height: 96rpx !important;
    padding-right: 20rpx;
  }
  .icon7 {
    font-size: 52rpx;
  }
  .flex13-clz {
    padding-top: 10rpx;
    flex: 1;
    padding-left: 10rpx;
    padding-bottom: 10rpx;
    padding-right: 10rpx;
  }
  .text-clz {
    font-weight: bold;
    font-size: 28rpx !important;
  }
  .flex11-clz {
    padding-top: 10rpx;
    padding-left: 10rpx;
    padding-bottom: 10rpx;
    padding-right: 10rpx;
  }
  .flex12-clz {
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    color: #ff5c47;
    padding-left: 20rpx;
    padding-bottom: 40rpx;
    border-top-right-radius: 12rpx;
    margin-right: 10rpx;
    background-color: #ffecee;
    margin-left: 10rpx;
    flex-shrink: 0;
    overflow: hidden;
    width: calc(33.3333333333% - 10rpx - 10rpx) !important;
    border-top-left-radius: 12rpx;
    margin-top: 10rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 10rpx;
    padding-right: 20rpx;
  }
  .text6-clz {
    font-weight: bold;
    font-size: 28rpx !important;
  }
  .icon-clz {
    bottom: 0rpx;
    position: absolute;
    right: 0rpx;
  }
  .icon {
    font-size: 64rpx;
  }
  .flex14-clz {
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    color: #03afe7;
    padding-left: 20rpx;
    padding-bottom: 40rpx;
    border-top-right-radius: 12rpx;
    margin-right: 10rpx;
    background-color: #dff6fe;
    margin-left: 10rpx;
    flex-shrink: 0;
    overflow: hidden;
    width: calc(33.3333333333% - 10rpx - 10rpx) !important;
    border-top-left-radius: 12rpx;
    margin-top: 10rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 10rpx;
    padding-right: 20rpx;
  }
  .text9-clz {
    font-weight: bold;
    font-size: 28rpx !important;
  }
  .icon4-clz {
    bottom: 0rpx;
    position: absolute;
    right: 0rpx;
  }
  .icon4 {
    font-size: 64rpx;
  }
  .flex17-clz {
    padding-top: 20rpx;
    border-bottom-left-radius: 12rpx;
    color: #8669ff;
    padding-left: 20rpx;
    padding-bottom: 40rpx;
    border-top-right-radius: 12rpx;
    margin-right: 10rpx;
    background-color: #f4edfd;
    margin-left: 10rpx;
    flex-shrink: 0;
    overflow: hidden;
    width: calc(33.3333333333% - 10rpx - 10rpx) !important;
    border-top-left-radius: 12rpx;
    margin-top: 10rpx;
    border-bottom-right-radius: 12rpx;
    margin-bottom: 10rpx;
    padding-right: 20rpx;
  }
  .text7-clz {
    font-weight: bold;
    font-size: 28rpx !important;
  }
  .icon5-clz {
    bottom: 0rpx;
    position: absolute;
    right: 0rpx;
  }
  .icon5 {
    font-size: 64rpx;
  }
  .container23285 {
  }
</style>

uniapp功能权限判断$auth.auth $auth.role显示判断生成源码

判断功能权限

判断角色权限

权限判断方法来源

代码生成

热门文章

最新文章

相关电子书