1、项目后端实现用户认证和授权的思路

认证和授权是每个框架的基本的底层功能，本项目中，认证使用了laravel6中的passport OAuth认证方式，基本概念和操作可以参考Laravel 的 API 认证系统 Passport。如果理解不了也无需担心，因为其已经无缝集成到本项目，无需配置，开箱即可以实现基于token的认证。直接使用就可以了。

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

2、项目后端的构架

项目的后端（api目录）由laravel6开发而来，基本的目录、结构以及规范请参考Laravel 项目开发规范

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

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

2.扩展开发时必须使用资源路由，而且各控制器中的方法命名必须一致。如批量删除（deleteAll）文件导入（upload）等必须与template.php一致

3.API编写过程中必须采用Eloquent: API 资源,必须有资源和资源集合文件，并放置于app\Http\Resources目录下面

3、项目前端的构架

项目的前端部分（element目录）由vue.js编写而成，使用到了axios、vue-router、vuex等插件以及element-ui。基本的目录结构和组织以vueAdmin为基础，相关功能知识点太多，请自行参考vue-element-admin 如果学习和使用中有问题，请进群交流。

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

5、理解前后端分离开发

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

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

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

6、前后端实现跨域

跨域是最常见的一个小问题，常困扰着开发者，解决的方案有多种，本人推荐直接使用web服务器来实现，可以去搜索apache或者nginx实现跨域

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!