vue项目数据分割的逻辑思路

     在后台管理系统中,前面我们讲了菜单权限鉴定按钮权限鉴定,今天我们讲讲如何对系统中的各个公司的数据进行数据分割,当然,如果系统只是本公司或者一个公司的员工看,那就不需要进行数据分割了,直接菜单和按钮的权限控制就可以控制几乎所有的数据权限了。若是此系统是这种情况:最高级别的是本公司,为admin账户,可以看所有用本公司产品的其他公司的产品数据,相当于帮他们维护,而他们也需要看自己公司产品的数据,而我们公司又有多个合作的公司。那我们就必须对其他的公司的数据进行分割,让其他公司的数据相互不能看。而我们可看可管理所有公司数据。

     从业务需求来讲,此功能并没有什么用户和数据的交互,所以,此逻辑代码是在后台完成。我们在此只梳理下实现这功能的逻辑。

   我们可把数据分割的逻辑分为两部分:

      1.除admin账户的其他所有账户部分:因为admin是本公司独有的账户名,其他账户都是通过该账户授权,然后其他公司再通过这个授权账户创建普通账户。这部分数据分割的逻辑就是根据设备数据选择所属组织来决定,即每条数据的创建,都会选择所属组织,包括获取所属组织的数据的接口,用户登入之后也像菜单和按钮鉴权一样,选择此角色属于哪个组织(即公司),然后把这角色分配给人员,当用户登入之后,后台根据用户去获取该用户所属哪个组织,在每次获取数据的接口,用人员所属的组织和设备所属的组织去匹配,若和设备所属组织和人员所属组织一样,则显示该设备。

      2.admin账户本身:因为创建所有的设备数据或者其他数据,都要从先创建组织,角色选定组织,组织绑定人员开始。所以在做完这些操作之后的所有创建的数据都可按照第一种方式取判定。但是当创建组织,获取组织,创建角色本身时,此时并没有选择组织,所以当创建此时的数据,一刷新,获取数据因找不到所属组织,都会不显示。所以这个地方我们应该加个特殊的条件判断,获取这三种数据时,若账户名为admin,则显示所有数据,若不是admin,则按第一种方式进行数据分割。

问题:当我们在后端数据库录入所有菜单数据,在菜单授权时获取这些数据让用户勾取授权,但不是所有用户都能看这所有的菜单,不能看这些菜单的当然不能让其勾取,如何解决?

在此提供一种解决办法:

可在前端进行判断,当用户登入账户为admin时,调用获取所有菜单数据的接口,展示所有菜单,当登入为非admin账户时,调用获取该账户下所绑定的角色所授权的菜单数据。这样既能限定每个账户给子用户菜单授权时只能在当前菜单权限下勾选。

      按照此逻辑已经成功实现不同账户绑定不同的公司,则可显示不同公司的数据,目前并未出现BUG,若后续出现BUG会继续跟进,也欢迎小伙伴们进行指正优化。

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要向Vue项目添加数据,首先需要确保你的数据已经存在。如果你的数据存储在一个后端数据库中,你需要使用后端API与数据库进行交互,以便从数据库中检索数据并将其提供给Vue应用程序。 一旦你有了数据,你可以使用Vue数据绑定语法将数据绑定到Vue组件中。这样,当数据发生变化时,组件将自动更新以反映这些变化。下面是一些向Vue项目添加数据的方法: 1. 使用Vue的响应式数据声明(data)属性。将数据添加到Vue实例的data属性中,然后可以在模板中使用它们。 ``` <template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: "Hello Vue!" }; } }; </script> ``` 2. 从API获取数据。使用Vue的生命周期方法之一(如created或mounted)调用API,以获取数据并将其分配给Vue组件的数据属性。 ``` <template> <div v-if="items.length"> <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul> </div> <div v-else>Loading...</div> </template> <script> export default { data() { return { items: [] }; }, async created() { const response = await fetch("/api/items"); this.items = await response.json(); } }; </script> ``` 这里我们使用了async/await来处理异步API调用。 3. 使用Vue的计算属性。计算属性是基于现有的Vue属性计算出来的,它们可以用来过滤、排序或组合数据。 ``` <template> <div> <ul> <li v-for="item in sortedItems" :key="item.id">{{ item.name }}</li> </ul> </div> </template> <script> export default { data() { return { items: [ { id: 1, name: "Apple" }, { id: 2, name: "Banana" }, { id: 3, name: "Orange" } ] }; }, computed: { sortedItems() { return this.items.sort((a, b) => a.name.localeCompare(b.name)); } } }; </script> ``` 这里我们使用computed属性来创建一个计算属性sortedItems,它返回按名称排序的items数组。 这些只是Vue中添加数据的几种方法之一,具体的实现取决于你的具体需求和数据结构。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值