AI 助理
备案控制台
开发者社区 安全 文章 正文

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

2024-10-12 43
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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>
文章标签：
数据安全/隐私保护
JavaScript
关键词：
uniapp功能
uniapp功能源码
uniapp权限
diygwcom
目录
相关文章
小暖的遇见
|
13天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码，uniapp社交兴趣圈子开发，框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制，PHP实现的圈子框架设计及代码编写，以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容，确保平台的安全性、性能和功能完整性。通过详细指导，帮助开发者快速搭建稳定可靠的圈子社交平台。
小暖的遇见
120 18
疯狂的猿
|
22天前
|
PHP
全新uniapp小说漫画APP小说源码/会员阅读/月票功能
价值980的uniapp小说漫画APP小说源码/会员阅读/月票功能
疯狂的猿
78 20
小暖的遇见
|
18天前
|
前端开发 数据库 UED
uniapp开发，前后端分离的陪玩系统优势，陪玩app功能特点，线上聊天线下陪玩，只要4800
前后端分离的陪玩系统将前端（用户界面）和后端（服务器逻辑）分开开发，前者负责页面渲染与用户交互，后者处理数据并提供接口。该架构提高开发效率、优化用户体验、增强可扩展性和稳定性，降低维护成本，提升安全性。玩家可发布陪玩需求，陪玩人员发布服务信息，支持在线聊天、预约及线下陪玩功能，满足多样化需求。[演示链接](https://www.51duoke.cn/games/?id=7)
小暖的遇见
56 6
小暖的遇见
|
17天前
|
前端开发 搜索推荐 PHP
大开眼界！uniapp秀操作，陪玩系统新功能，陪玩app源码，可实时互动随心优化！
多客游戏陪玩系统采用前端uniapp与PHP语言，实现全开源、易改造，RTC传输协议确保低延迟语音连麦，分布式部署应对高并发。功能创新包括游戏约单、多人语音聊天室、动态广场、私信聊天等，提供高端社交和个性化服务，满足各类需求，让玩家畅享游戏乐趣。
小暖的遇见
71 0
DK九月
|
20天前
|
存储 移动开发 安全
做一款校园二手交友找搭子跑腿陪玩圈子系统综合性圈子系统/搭建圈子论坛系统/校园圈子论坛系统-自带校园跑腿功能/基于uniapp的校园圈子系统
制作一款基于uni-app的校园二手交友找搭子跑腿陪玩圈子系统综合性校园圈子系统，需要综合考虑多个方面，包括需求分析、系统设计、技术开发、功能实现以及后续的运营与维护。
DK九月
46 0
疯狂的猿
|
2月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
疯狂的猿
52 0
在线课堂+工具组件小程序uniapp移动端源码
diygwcom
|
3月前
|
移动开发 小程序 数据可视化
DIY可视化导出源码整合uniapp环境搭建+调试+运行发布
DIY可视化导出源码整合uniapp环境搭建+调试+运行发布
diygwcom
83 0
diygwcom
|
3月前
|
传感器 数据可视化 网络协议
DIY可视化整合MQTT生成UniApp源码
DIY可视化整合MQTT生成UniApp源码
diygwcom
58 0
游客cxtb2yf2r55as
|
3月前
|
前端开发 JavaScript PHP
Thinkphp在线客服系统源码多语言外贸版_PHP客服系统源码Uniapp开发搭建+论文设计
Thinkphp在线客服系统源码多语言外贸版_PHP客服系统源码Uniapp开发搭建+论文设计
游客cxtb2yf2r55as
190 0
八音盒coding
|
6月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
八音盒coding
148 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)

热门文章

最新文章

  • 1
    uniapp中组件库的Checkbox 复选框的使用方法
  • 2
    uniapp使用Vue3挂载函数到全局
  • 3
    uniapp android 打包报错：Execution failed for task ‘:app:checkReleaseDuplicateClasses‘.
  • 4
    uniapp 将标题背景更换背景图片 完美解决（附加源码+实现效果图）
  • 5
    uniapp组件库中Collapse 折叠面板 的使用方法
  • 6
    uniapp中组件库的Checkbox 复选框 的丰富使用方法
  • 7
    UniAPP 目录结构详细介绍（及条件编译文件夹详解）
  • 8
    uniapp,小程序或APP的底部弹出的滚动选择组件picker，三级联动，选择地址。
  • 9
    【uniapp小程序】uploadFile文件上传
  • 10
    uniapp开发H5及app监听返回事件（以及监听不到的处理方法）
  • 1
    【Uniapp 专栏】Uniapp 的状态管理功能深度解析
    374
  • 2
    【Uniapp 专栏】从案例看 Uniapp 在物联网应用中的运用
    395
  • 3
    【Uniapp 专栏】Uniapp 打造的音乐类应用案例剖析
    126
  • 4
    【Uniapp 专栏】通过 Uniapp 构建移动办公应用案例分享
    168
  • 5
    【Uniapp 专栏】Uniapp 在社交应用开发中的案例研究
    136
  • 6
    【Uniapp 专栏】基于 Uniapp 的电商应用开发案例解析
    244
  • 7
    【Uniapp 专栏】Uniapp 与后端接口对接的实战要点
    720
  • 8
    【Uniapp 专栏】在 Uniapp 中实现复杂交互的实战技巧
    137
  • 9
    【Uniapp 专栏】Uniapp 项目中路由管理的实战经验分享
    279
  • 10
    【Uniapp 专栏】实用的 Uniapp 性能优化实战策略
    321

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    DataWorks智能交互式数据开发与分析之旅