django权限系统实现步骤_一种基于Vue.js和Django的权限控制方法及系统与流程
本发明涉及计算机应用技术领域，更具体的说是涉及一种基于vue.js和django的权限控制方法及系统。
背景技术：
前后端分离的架构技术已经非常成熟，前端js技术发展很快，出现了很多流行的mvvm框架，比如angular、react、vue，而python作为后端语言，其开源社区有大量活跃用户，流行的web框架已经让人眼花缭乱，比如django、flask、tornado、bottle等等。当前，前端采用vue框架，后端采用django框架进行了自动化测试平台的开发。
目前，前后端分离的权限控制，通常有两种方案，一是通过制定好的角色来进行前端页面权限的控制，无法实现前端权限与后端接口权限的一一对应，使得扩展角色非常困难，不方便灵活地进行权限控制；二是通过后端返回前端的路由表，前端拿到后端返回的路由表数据，还需要遍历路由表生成前端正常使用的路由，重复进行生成前端路由的计算。
技术实现要素：
针对以上问题，本发明的目的在于提供一种基于vue.js和django的权限控制方法及系统，能够达到前端后端权限严格控制的效果。
本发明为实现上述目的，通过以下技术方案实现：一种基于vue.js和django的权限控制方法，包括如下步骤：
s1：利用django生成web后端接口权限表，并进行接口权限与前端权限的匹配；
s2：创建角色并选择权限项；
s3：创建当前角色下的用户；
s4：利用django获取当前用户的所有前端权限代号；
s5：利用vue.js，根据匹配的前端权限代号，控制前端菜单权限；
s6：利用vue.js,根据匹配的前端权限代号，控制前端指令权限；
s7：利用django，根据后端接口权限表，控制后端接口权限。
进一步，所述步骤s1中，利用django生成web后端接口权限表具体包括：
在工程中添加django的功能模块auth、contenttypes和rest_framework；
使用migrate命令生成数据库表，所述数据库表包括接口权限表auth_permission表、用于记录app_label和model的django_content_type表。
进一步，所述步骤s1中，进行接口权限与前端权限的匹配具体包括：
通过django_content_type表获取所有的app_label和model；
根据app_label和model匹配前端权限，筛选掉不需要通过前端控制的权限，通过permission_set关系字段获取auth_permission表中的权限代号；
获取的权限代号，包括与前端菜单项权限对应的菜单权限代号和与前端元素指令权限对应的指令权限代号。
进一步，所述步骤s2包括：
获取当前系统所有的前端菜单权限代号和指令权限代号；
根据获取的菜单权限代号和指令权限代号，生成前端的权限树；
创建新的角色，并为此角色选择权限树中的权限项；
将为此角色选择的权限项写入数据库。
进一步，所述步骤s3包括：
获取所有已创建的角色
创建用户，并为此用户选择一个或多个角色。
进一步，所述步骤s4包括：
通过django提供的get_all_permission()函数获取当前用户的所有接口权限；
将当前用户的所有接口权限与前端的权限的匹配，向前端分别返回当前用户所有的菜单权限代号和指令权限代号。
进一步，所述步骤s5包括：
通过配置，使前端路由名称与菜单权限代号一一对应；
获取当前用户的所有菜单权限代号；
根据获取的菜单权限代号匹配前端路由，得到当前用户拥有权限的前端动态路由；
根据前端动态路由生成前端菜单栏，实现前端菜单权限控制。
进一步，所述步骤s6包括：
在前端通过使用vue.directive自定义v-perm指令和编写checkpermission函数判断当前用户是否具备前端元素对应的指令权限；
获取当前用户的所有指令权限代号；
在前端页面中，使用v-perm指令或checkpermission函数控制前端页面的元素。
进一步，所述步骤s7包括：
基于django提供djangomodelpermissions类的自定义permission类，定义针对指令get、options、head、post、put、patch、delete对应的权限代号；
在相关接口的view中设置permission_classes为自定义的permission类；
当访问后端接口时，django根据权限代号判断当前用户是否有访问该接口的权限。
相应的，本发明还公开了一种基于vue.js和django的权限控制系统，包括：
匹配单元，用于在web后端生成接口权限表，并进行接口权限与前端权限的匹配；角色创建单元，用于创建角色并选择权限项；
用户创建单元，用于创建当前角色下的用户；
获取权限单元，用于利用django获取当前用户的所有前端权限代号；
前端权限控制单元，用于利用vue.js控制前端菜单权限和前端指令权限；
后端权限控制单元，用于利用django控制后端接口权限。
对比现有技术，本发明有益效果在于：本发明提供了一种基于vue.js和django的权限控制方法及系统，实现了前端菜单权限和指令权限与后端接口权限的代号一一对应，前端页面菜单及按钮等涉及权限的元素根据后端权限代号动态生成，达到前端后端权限严格控制的效果。
由此可见，本发明与现有技术相比，具有突出的实质性特点和显著的进步，其实施的有益效果也是显而易见的。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
附图1是本发明的方法流程图。
附图2是本发明的系统结构图。
具体实施方式
下面结合附图对本发明的具体实施方式做出说明。
本发明提供了一种基于vue.js和django的权限控制方法及系统，其中，vue.js是一套用于构建用户界面的渐进式框架，其核心库只关注视图层，被设计为可以自底向上逐层应用；django：是一个开放源代码的web应用框架，由python写成。其主要目标是使得开发复杂的、数据库驱动的网站变得简单。
如图1所示，本发明提供了一种基于vue.js和django的权限控制方法，包括如下步骤：
s1：利用django生成web后端接口权限表，并进行接口权限与前端权限的匹配。
其中，利用django生成web后端接口权限表的过程如下：
首先，在工程中添加auth、contenttypes、rest_framework等app。
然后，使用migrate命令生成数据库表，其中，auth_permission表即为接口权限表，其codename字段代表了具体的某项权限，如对应某个model的增、删、改、查；django_content_type表记录了所有的app_label和model。
其中，进行接口权限与前端权限的匹配的过程如下：
首先，通过django_content_type表获取所有的app_label和model。
然后，根据app_label和model匹配前端权限，筛选掉不需要通过前端控制的某些权限，通过permission_set关系字段获取接口权限表(auth_permission)中的codename字段的内容(即权限代号)。
最后，获取的codename字段的内容即匹配后的前端与后端一一对应的权限代号，包括菜单权限代号和指令权限代号(其中某个指令权限对应了某个接口权限)。
s2：创建角色并选择权限项。具体包括：
获取系统所有的前端菜单权限代号和指令权限代号；
根据获取的菜单权限代号和指令权限代号，生成前端的权限树；
创建新的角色，并为此角色选择权限树中的某项或全部权限项；
将为此角色选择的权限项写入数据库。
s3：创建当前角色下的用户。首先，获取所有已创建的角色。然后，创建用户，并为此用户选择某个或某几个角色。
s4：利用django获取当前用户的所有前端权限代号。首先，通过django提供的get_all_permission()函数获取当前用户的所有接口权限。然后，将当前用户的所有接口权限根据与前端的权限的匹配，向前端分别返回当前用户所有的菜单权限代号和指令权限代号。
s5：利用vue.js，根据匹配的前端权限代号，控制前端菜单权限。具体包括：
通过配置，使前端路由名称与菜单权限代号一一对应；
获取当前用户的所有菜单权限代号；
根据获取的菜单权限代号匹配前端路由，得到当前用户拥有权限的前端动态路由；
根据前端动态路由生成前端菜单栏，实现前端菜单权限控制。
s6：利用vue.js,根据匹配的前端权限代号，控制前端指令权限。具体包括：
前端使用vue.directive自定义指令，如v-perm指令，用于html标签中，判断当前用户是否具备某项权限，若具备则生成dom元素，否则不生成；
前端编写checkpermission函数，用于判断当前用户是否具备某项权限，若具备则返回布尔量true，否则返回布尔量false；
获取当前用户的所有指令权限代号；
在前端页面中，使用v-perm指令或checkpermission函数判断当前用户是否具有某权限，如新增权限、编辑权限、删除权限，来控制前端页面某个元素如按钮是否生成或显示。
s7：利用django，根据后端接口权限表，控制后端接口权限。具体包括：基于django提供的djangomodelpermissions类自定义permission类，定义针对get、options、head、post、put、patch、delete对应的权限代号；
在涉及到接口的view中设置permission_classes为自定义的permission类；
当访问某后端接口时，django会根据权限代号判断当前用户是否有访问该接口的权限。
相应的，如图2所示，本发明还公开了一种基于vue.js和django的权限控制系统，包括：
匹配单元，用于在web后端生成接口权限表，并进行接口权限与前端权限的匹配；
角色创建单元，用于创建角色并选择权限项；
用户创建单元，用于创建当前角色下的用户；
获取权限单元，用于利用django获取当前用户的所有前端权限代号；
前端权限控制单元，用于利用vue.js控制前端菜单权限和前端指令权限；
后端权限控制单元，用于利用django控制后端接口权限。
在本发明所提供的实施例中，应该理解到，所揭露的系统、系统和方法，可以通过其它的方式实现。例如，以上所描述的系统实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，系统或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本发明各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个单元中。
同理，在本发明各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。
结合附图和具体实施例，对本发明作进一步说明。应理解，这些实施例仅用于说明本发明而不用于限制本发明的范围。此外应理解，在阅读了本发明讲授的内容之后，本领域技术人员可以对本发明作各种改动或修改，这些等价形式同样落于本申请所限定的范围。