后台管理系统项目流程及逻辑处理（一）

项目流程图

考试管理系统流程

技术栈 **

Vue + element-ui

模块设计 （四个模块）***

设计图拿到后，我们会根据设计图进行评估分析和模块划分， 内容部分我们这里划分出五个模块

• 试卷管理
• 用户管理
• 考试管理
• 班级管理
• 阅卷管理

项目进展管理工具 采用 的是teambition ，这个工具可以安利一下，能高效，清晰的对我们的整个项目进行统筹处理，更适用于团队协作，很是强大

接口处理（axios）***

我们与后台对数据采用的 是axios

• 在对接过程中会遇到跨域问题 ，
• ------开发环境下我们就用webpack 的proxy 处理，但是上线的话 webpack的处理方式显然不适用，webpack只是一个开发辅助工具，，不会被打包上线 ，解决方案是 用当前比较流行的 CORS （跨域资源共享）机制，让后台去做跨域处理，也就是加一个响应头部键名：across-control-allow-origin，值为请求资源的 域名
• 跨域问题虽然解决了 但是与之相关其他问题也随之而来，因为across-control-allow-origin 的值只能填写一个 ，我们前台可能有多个域名进行数据请求，那么对于这个问题的处理我们的解决方案比较简单粗暴一些，就是在后台做一个简单的逻辑处理，设置一个白名单， 进行请求时后台会知道是哪个域名正在请求，然后去对照白名单， 名单上有的 才允许请求

权限及动态路由的处理 *****

	在 vue 的全局导航守卫进行 权限处理

RBAC

在进入一个管理系统前 一定是由一个 入口通道的，也就是我们最最常见的 登录页面， 对于后台管理来说 登录者的身份至关重要，

我们在用户登录的权限处理方式 是 RBAC （role based access control基于角色的权限控制）下面介绍一下 权限模型

权限的解决方案很多 ，我们为什么选择RBAC呢，简单的介绍一下 RBAC 的优势
用一张图做下ACL 与RBAC 的对比

RBAC 简化了 用户 与权限的关系，使之更易维护和拓展

上图中RBAC 不需要给每个用户分配具体视图权限 而是给分配角色，每个 角色的 视图权限固定，那么用户的视图权限就得到了，这使得给用户分配权限和回收权限更加方便

动态路由

我们用户在登录在登录成功的那一刻开始 ，就会得到后台返回给我们的登录态，也就是角色权限码，登录成功进入主页 的时候 我们需要知道当前是谁 登录上了，应该给当前的角色 分配什么样的视图，当然我们在进行数据请求的时候也需要知道是谁在请求，是否该角色有请求的权限等等，这是我们在处理权限这一业务时必须要考虑的事
1. 技巧：

• 在做业务请求时每次都带上登录态，会是请求体太过繁重，可以将登录态token这种 属于公共的非业务逻辑，可以放在axios的拦截器中区处理，这样还能保证性能的优化提高
• 设置cookie时 用第三方包 cookiejs 将cookie 的增删改查封装好留着待用
• 若手动修改地址栏url时 需要一个白名单 ，判断是否还是 login 或是redirect 以防出现页面重复跳转的情况 陷入死循环

待续…