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

简介: 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>
目录
相关文章
|
2月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
46 2
|
2月前
|
移动开发 数据可视化 JavaScript
DIY官网可视化设计导出UNIAPP源码
DIY官网可视化设计导出UNIAPP源码
39 2
|
2月前
|
移动开发 数据可视化 小程序
高颜值可视化设计UNIAPP源码生成器
高颜值可视化设计UNIAPP源码生成器
50 1
|
4月前
|
前端开发 JavaScript 应用服务中间件
【uniapp】谷歌授权登录,前端uniapp直调(含源码)
本文介绍如何在uniapp项目中实现谷歌授权登录,无需后端参与。文章分为三部分:1)谷歌授权登录流程,详细说明从用户点击登录到获取用户信息的整个过程;2)谷歌开发者控制台配置,包括创建项目、配置同意屏幕及OAuth客户端ID等步骤;3)uniapp前端实操,提供具体代码示例,展示如何获取授权码并用其交换访问令牌,最终获取用户信息
172 2
【uniapp】谷歌授权登录,前端uniapp直调(含源码)
|
2月前
|
移动开发 小程序 数据可视化
DIY可视化导出源码整合uniapp环境搭建+调试+运行发布
DIY可视化导出源码整合uniapp环境搭建+调试+运行发布
54 0
|
2月前
|
传感器 数据可视化 网络协议
DIY可视化整合MQTT生成UniApp源码
DIY可视化整合MQTT生成UniApp源码
47 0
|
2月前
|
前端开发 JavaScript PHP
Thinkphp在线客服系统源码多语言外贸版_PHP客服系统源码Uniapp开发搭建+论文设计
Thinkphp在线客服系统源码多语言外贸版_PHP客服系统源码Uniapp开发搭建+论文设计
|
4月前
|
开发框架 移动开发 前端开发
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
基于SqlSugar的开发框架循序渐进介绍(19)-- 基于UniApp+Vue的移动前端的功能介绍
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的公园管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的公园管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
131 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)