认证和授权是每个框架的基本的底层功能,本项目中,认证使用了laravel6中的passport OAuth认证方式, 基本概念和操作可以参考Laravel 的 API 认证系统 Passport。如果理解不了也无需担心,因为其已经无缝集成到本项目 ,无需配置,开箱即可以实现基于token的认证。直接使用就可以了。
授权功能实现了基于角色的权限访问控制(RBAC),为了方便集成和使用,直接使用了中间件的方式来实现。方案采用了用户->角色->功能三个元素关联来实现。 每一个功能指向一个后端路由,一个角色可以包含多个功能权限,而一个用户又可以包括多个角色,实现了一个用户可以有多个指定的功能,从而实现了RBAC授权。
项目的后端(api目录)由laravel6开发而来,基本的目录、结构以及规范请参考Laravel 项目开发规范
为了更优雅、艺术的书写代码,请遵循以下规范:
1.路由必须有命名,这是功能权限控制所必须的
2.扩展开发时必须使用资源路由,而且各控制器中的方法命名必须一致。如批量删除(deleteAll) 文件导入(upload)等 必须与template.php一致
3.API编写过程中必须采用Eloquent: API 资源,必须有资源和资源集合文件,并放置于app\Http\Resources目录下面
项目的前端部分(element目录)由vue.js编写而成,使用到了axios、vue-router、vuex等插件以及element-ui。 基本的目录结构和组织以vueAdmin为基础,相关功能知识点太多,请自行参考vue-element-admin 如果学习和使用中有问题,请进群交流。
1.vue从main.js启动,进行渲染,注入了vue-router插件,vue-router控制了前端路由,由于未登录,vue-router转到登录路由,显示登录界面。
2.输入用户名和密码后,axios插件发送请求到登录接口,后端进行认证,认证通过后后返回token,前端保存token到cookie。
3.认证通过后,前端利用token去获取登录用户的个人信息,这里面就包括用户的角色和相关的功能权限。
4.前端获取角色(roles)和权限信息(permissions),使用vuex进行保存,以便多个页面共享上述数据。前端根据获得的角色去对比保存在前端本地的完整的路由表,筛选出符合角色的路由并动态挂载到真实的前端路由表上。 根据重新生成的路由表,利用element-ui的相关组件,生成左侧的导航栏和菜单项并显示出来。
5.前端显示出主菜单和根据权限进行了页面的显示后,渲染完成,进入与用户的交互状态,等待用户执行相关操作。
前后端分离开发是现今的开发主流与趋势,通过分离开发,后端只需要维护一套api就能满足(PC、平板、手机APP、微信公众号、小程序等)多端的应用需求, 从而让后端开发人员更聚焦于程序业务逻辑的实现,方便测试的同时也有利于后期的维护与升级
前后端分离项目中的前端部分一般由javascript结合主流的前端框架和库来书写。页面由前端来实现,页面之间的跳转也由前端路由来负责, 前端和后端之间的数据传输主要通过ajax的方式来实现,数据从后端拿,怎么呈现有前端来负责。
如果一个项目采用前后端分离的方式来开发,不论是开发还是部署,我们可以理解为两个并行的项目,约定好接口后,可以同时开发,同时测试。 在部署的时候,一般建议使用两个不同的域名,一个指向项目的后端部分,另一个指向前端打包发布好的js文件目录。
跨域是最常见的一个小问题,常困扰着开发者,解决的方案有多种,本人推荐直接使用web服务器来实现,可以去搜索apache或者nginx实现跨域