uni-app 需要一个权限组件

在 uni-app 中实现一个权限组件，可以帮助你根据用户的权限动态显示或隐藏页面元素。以下是一个简单的权限组件示例，包括组件定义和使用示例。

权限组件定义 (Permission.vue)

<template>
  <view v-if="hasPermission">
    <slot></slot>
  </view>
</template>

<script>
export default {
  name: 'Permission',
  props: {
    permission: {
      type: String,
      required: true
    },
    userPermissions: {
      type: Array,
      required: true
    }
  },
  computed: {
    hasPermission() {
      return this.userPermissions.includes(this.permission);
    }
  }
}
</script>

<style scoped>
/* 你可以根据需要添加样式 */
</style>

使用权限组件的示例页面 (ExamplePage.vue)

<template>
  <view>
    <permission :permission="'admin'" :userPermissions="userPermissions">
      <text>This is an admin-only section.</text>
    </permission>
    <permission :permission="'user'" :userPermissions="userPermissions">
      <text>This is visible to all users.</text>
    </permission>
  </view>
</template>

<script>
import Permission from '@/components/Permission.vue';

export default {
  components: {
    Permission
  },
  data() {
    return {
      userPermissions: ['user'] // 模拟用户权限，例如 ['user', 'admin']
    };
  },
  mounted() {
    // 你可以在这里从服务器获取用户权限并更新 userPermissions
    // this.fetchUserPermissions();
  },
  methods: {
    // fetchUserPermissions() {
    //   // 模拟异步获取权限
    //   setTimeout(() => {
    //     this.userPermissions = ['admin', 'user']; // 更新权限
    //   }, 1000);
    // }
  }
}
</script>

<style scoped>
/* 你可以根据需要添加样式 */
</style>

说明

1. 权限组件 (Permission.vue)：

   • 接收 permission 和 userPermissions 两个属性。
   • 通过计算属性 hasPermission 判断当前用户是否有指定权限。
   • 如果有权限，则显示插槽内容。

2. 示例页面 (ExamplePage.vue)：

   • 引入并使用 Permission 组件。
   • 模拟用户权限，可以根据实际情况从服务器获取。

这个示例展示了如何在 uni-app 中创建一个简单的权限组件，并根据用户权限动态显示内容。你可以根据需要扩展这个组件，例如添加更多的权限检查逻辑或样式。