knowledge.md · 王宇/laravel_template_with_vue

## 1、项目后端实现用户认证和授权的思路
认证和授权是每个框架的基本的底层功能，本项目中，认证使用了laravel5.5中的passport OAuth认证方式，
基本概念和操作可以参考[Laravel 的 API 认证系统 Passport](https://d.laravel-china.org/docs/5.5/passport)。如果理解不了也无需担心，因为其已经无缝集成到本项目
，无需配置，开箱即可以实现基于token的认证。直接使用就可以了。

授权功能实现了基于角色的权限访问控制(RBAC),为了方便集成和使用，直接使用了中间件的方式来实现。方案采用了用户->角色->功能三个元素关联来实现。
每一个功能指向一个后端路由，一个角色可以包含多个功能权限，而一个用户又可以包括多个角色，实现了一个用户可以有多个指定的功能，从而实现了RBAC授权。

## 2、项目后端的构架
项目的后端（backend目录）由laravel5.5开发而来，基本的目录、结构以及规范请参考[Laravel 项目开发规范](https://laravel-china.org/courses/laravel-specification)

为了更优雅、艺术的书写代码，请遵循以下规范：

1.路由必须有命名，这是功能权限控制所必须的

2.扩展开发时必须使用资源路由，而且各控制器中的方法命名必须一致。如批量删除（deleteAll） 文件导入（upload）等  必须与PermissionController.php一致
 
3.API编写过程中必须采用[Eloquent: API 资源](https://d.laravel-china.org/docs/5.5/eloquent-resources),必须有资源和资源集合文件，并放置于app\Http\Resources目录下面

4.表单验证建议使用单独的表单请求类，并放置于app\Http\Requests目录

5.文件的导出建议使用单独的导出类进行注入到控制器进行处理，导出类放置于app\Http\Controllers\Import目录

## 3、项目前端的构架
项目的前端部分（frontend目录）由vue.js编写而成，使用到了axios、vue-router、vuex等插件以及element-ui。
基本的目录结构和组织以[vueAdmin](https://github.com/PanJiaChen/vueAdmin-template)为基础，相关功能知识点太多，请自行参考[vue-element-admin](https://panjiachen.github.io/vue-element-admin-site/#/zh-cn/)
如果学习和使用中有问题，请进群交流。

前端权限部分参考[前端权限控制 Vue-Access-control](https://github.com/tower1229/Vue-Access-Control),并结合vueAdmin的项目结构进行了深入修改，
以便更好的集成到项目中，从而实现了精细化的前端权限控制。

## 4、前端的运行流程简述
1.vue从main.js启动，进行渲染，注入了vue-router插件，vue-router控制了前端路由，由于未登录，vue-router转到登录路由，显示登录界面。

2.输入用户名和密码后，axios插件发送请求到登录接口，后端进行认证，认证通过后后返回token,前端保存token到cookie。

3.认证通过后，前端利用token去获取登录用户的个人信息，这里面就包括用户的角色和相关的功能权限。

4.前端获取角色（roles）和权限信息（permissions），使用vuex进行保存，以便多个页面共享上述数据。前端根据获得的角色去对比保存在前端本地的完整的路由表，筛选出符合角色的路由并动态挂载到真实的前端路由表上。
根据重新生成的路由表，利用element-ui的相关组件，生成左侧的导航栏和菜单项并显示出来。

5.前端把获得的权限信息存储到vuex里面，主要用于访问后台接口时的请求拦截，如果用户没有接口权限，在前端就会被拦截而无需发到后端，这样就减少了请求量，合理利用带宽。
权限信息还主要用于页面上是否显示各种元素的判断，举例而言，如果用户没有删除学期信息的功能，则不显示相关的删除按钮。
这里主要利用了vue.js中的指令功能和全局函数结合后台返回的权限数据来判断。

6.前端显示出主菜单和根据权限进行了页面的显示后，渲染完成，进入与用户的交互状态，等待用户执行相关操作。

## 5、理解前后端分离开发
前后端分离开发是今年的开发主流与趋势，通过分离开发，后端只需要维护一套api就能满足（PC、平板、手机APP、微信、小程序等）多端的应用需求，
从而让后端开发人员更聚焦于程序业务逻辑的实现，方便测试的同时也有利于后期的维护与升级

前后端分离项目中的前端部分一般由javascript结合主流的前端框架和库来书写。页面由前端来实现，页面之间的跳转也由前端路由来负责，
前端和后端之间的数据传输主要通过ajax的方式来实现，数据从后端拿，怎么呈现有前端来负责。

如果一个项目采用前后端分离的方式来开发，不论是开发还是部署，我们可以理解为两个并行的项目，约定好接口后，可以同时开发，同时测试。
在部署的时候，一般建议使用两个不同的域名，一个指向项目的后端部分，另一个指向前端打包发布好的js文件目录。

## 6、前后端实现跨域
跨域是最常见的一个小问题，常困扰着开发者，解决的方案有多重，其中最好的解决方案就和本项目中使用的一样，让后端来实现，
原理就是在http数据请求的返回头上加上允许调用的域名，如果考虑到更多的安全性问题，可以在backend\app\config目录下的cors.php文件里进行配置，
具体可以参考[后端跨域](https://github.com/barryvdh/laravel-cors)

至于前端，采用此种方法进行跨域后，无需进行任何设置，直接调用接口就能够返回数据。

王宇/laravel_template_with_vue

简介

发行版

贡献者

近期动态

王宇/laravel_template_with_vue .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

王宇/laravel_template_with_vue