django如何管理vue页面权限(2023年最新整理)

茫然知了 • 2023-09-23 13:07 • 生活指南 • 阅读 71

导读：很多朋友问到关于django如何管理vue页面权限的相关问题，本文首席CTO笔记就来为大家做个详细解答，供大家参考，希望对大家有所帮助！一起来看看吧！

Vue前端用户权限控制大全

用户权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源

接口权限目前一般采用通用的形式来验证(用户是否登录系统)，没有的话一般返回401，跳转到登录页面重新进行登录 ,

登录成功后拿到token，将token存起来，通过axios请求拦截器进行拦截，每次请求的时候头部携带token

通过自定义指令进行按钮权限的判断

自定义权限指令

在使用的按钮中只需要引用v-has指令

全局路由守卫里做判断

每次路由跳转的时候都要判断权限，这里的判断也很简单，因为菜单的name与路由的name是一一对应的，而后端返回的菜单就已经是经过权限过滤的

如果根据路由name找不到对应的菜单，就表示用户有没权限访问

如果路由很多，可以在应用初始化的时候，只挂载不需要权限控制的路由。取得后端返回的菜单后，根据菜单与路由的对应关系，筛选出可访问的路由，通过addRoutes动态挂载

这种方式的缺点：

菜单需要与路由做一一对应，前端添加了新功能，需要通过菜单管理功能添加新的菜单，如果菜单配置的不对会导致应用不能正常使用

全局路由守卫里，每次路由跳转都要做判断

vue-element 权限管理数据的处理，简单实用。

1,首先获取到后端返回给我们的权限数据,数据大概长这么个样子。

2,要渲染到element的树形结构上的话，要做一层递归处理，让它形成树形结构。这个也可以不用递归，我看他们用map这个属性，也能很好的处理。具体做法如下：

这个数据渲染好以后，是长这样的，也就符合了我们el-tree组件所需的数据结构。

3，现在管理员开始在管理界面开始做权限管理操作。如图所示：

这样的话返回给后端的是一个id组成的数组， data=[1,4,10] 这就是你返回给后端的数据，还没完接下来该复现了。

4,现在后端给数据返回给你，他是按照刚才你给的数据返回过来的。然后添加上check属性，这个也是你们约定，数据大概就长这样：

你可能还在想不错，不错。还不用递归，循环就给数据拿了。当你拿到所有的数组check为true的数据组成的数组treelist,然后 this.$refs.tree.setCheckedKeys(this.treelist) 上去时，已经不符合要求了，因为父集全选，子集就会全选。他会变成这样：

5，这样肯定不行，我们要再做一次数据处理，让它符合要求。1，要给数据再次递归成树形结构，还是上面的方法给数据递归成树形结构。2，遍历这个树形结构，判断父集的子集是否全部为true，如果不是就就让他的check属性设置为false，

这里说明一下。this.state 这个变量你要自己设置一下或者全局变量都行，反正要设置一下，设置为true。首先我们给递归好的树形结构放在 traveData 这个函数里面这个函数会递归一遍我们的数据，主要是判断

item.check = item.children.length 0 ? this.getchildStatus(item.children) : item.check

这里是判断他有没有子集，没有的话就是ok，那么check的值就是合理的，如果他有子集但是它的check为true这就很不合理，因为我们不知道他的子集到底是不是都是选了的，也就是check为true，所以要做一层碰断，判断他的子集是否全为true，只要他的子集有一个不为true，那它就不能为true this.getchildStatus(item.children) 所以这里又做了一层，遍历他的所有子集。判断check的值。ok做到这里我们大概也差不多了。拿到 return data 的值我们还要做一次数据的递归，

6,至此，我们已经拿到了 this.treelist的值我们只要

这样就可以把我们的树形结构又从新渲染好了。数据用的都是模拟数据，但是和业务场景的数据其实差别不大，只要按照这个流程就ok了。不管是element，antd，我觉得这个全选和半选感觉还可以优化下。不是真的挺绕的。

vue项目权限管理

首先，权限管理般需求是两个：权限和按钮权限。

前端案会把所有路由信息在前端配置，通过路由守卫要求户登录，户登录后根据过滤出路由表。如我会配置个 asyncRoutes 数组，需要认证的在其路由的 meta 中添加个 roles 字段，等获取户之后取两者的交集，若结果不为空则说明可以访问。此过滤过程结束，剩下的路由就是该户能访问的，最后通过 router.addRoutes(accessRoutes) 式动态添加路由即可。

后端案会把所有路由信息存在数据库中，户登录的时候根据其查询得到其能访问的所有路由信息返回给前端，前端再通过 addRoutes 动态添加路由信息。

按钮权限的控制通常会实现个指令，例如 v-permission ，将按钮要求通过值传给v-permission指令，在指令的 moutned 钩中可以判断当前户和按钮是否存在交集，有则保留按钮，则移除按钮。

路由守卫 permission.js ：

路由成## permission.js ：

动态追加路由## permission.js ：

服务端返回的路由信息如何添加到路由器中？

请教Django的User/Group/Permission管理

Django的用户权限管理也是业界比较通用的RBAC(Role-Based Access Control)的权限控制模型。其实很简单：看一个用户是否有权限访问某页面(view)，就看这个用户是否拥有访问这个页面所必需的角色(Role)。而一个用户的所拥有的所有的角色有两个途径获得，1、是直接赋给这个用户的角色，2、是这个用户所属的所有小组所拥有的角色，这个用户间接地就拥有了这些权限角色。