后台管理系统VUE框架从登陆到权限获取全流程分析
1. 首先将后台管理系统前端和后台分别跑起来
1、 前端端口为8080
2、 后台API接口端口为8127
3、 注意需要将后台管理系统前端的API接口的URL改为如下才能连到本地服务调试
2. 我们先登录看能否正常访问后台服务
以上能正常登录到后台管理系统
OK，接下来正式分析整个流程
3. 先分析后台管理系统前端代码，记住我们用的VUE框架
1、 入口在哪儿？入口在“main.js”里面，所要做的工作为：初始化vue实例并使用需要的插件（引入公共element组件等、路由拦截、start登录、鉴权可以在这里统一处理）
以上代码为：App.vue是主组件，所有页面都是在App.vue下进行切换的, router标示为App.vue的子组件，所以实际我们将进入“router.js”的路由分析，这个才是整个流程代码的程序入口
2、 分析“router.js”
① 程序跳到入口“router.beforeEach”方法，由于初始化了router
其第一个入口我们设置为：“/Login”登录入口，这个Login.vue的文件放在哪儿的呢？放在“views”->“Login.vue”下面的，那程序是如何找到的呢？
② 还是需要先运行方法：
方法内我做了一步一步的注释打印，从以下代码就可以看到先是找到路由“/Login”
在第一次运行前端代码的时候是需要获取到动态菜单，并根据以上的path获取到页面的路径，代码如下：
因此通过这个动态菜单我们就可以拿到“/Login”的路径在“/views/login”下面，因此整个前端代码初始化会直接跳到我们的登录页面，即如下：
3、 OK，我们这时候跳到登录页面，带入用户名和密码，并调用接口：/admin/customer/login，将参数传到后台
4. 我们进入后台分析登录接口
1、 找到入口路径
由于是总平台，所需还需要带入一个参数：type=1，表示是总平台后台管理系统登录用户
2、 进入login的方法
① 首先我们通过登录的用户名即为手机号customer_phone的参数，并还要判断type=1，state状态是启用的，三个参数去查询用户表customer，取出登录的一条用户，当然如果用户没有查询到我们就提示“账号或密码错误”
② 同时我们还需要进行密码对比判断密码是是否正确，如果不正确也提示“账号或密码错误”，但这个提示也需是我下面的研发人员不够仔细，其实应该分开提示
③ 如果以上账号及密码都没有问题的话，我们将调用方法：loginSuccess返回用户相关信息：token、用户手机号、用户头像，用户的roleId（这个是关键字段）
以上roleId的获取需要到customerRole用户权限表里面去获取，期获取的标志是“customer_id”用户的ID
5. 行了，我们获取到了用户的权限roleId，这个时候就需要重新回到后台管理系统前端代码的“router.js”里面，调用获取权限的方法“permission.init”
这个方法在“permission.js”里面，我们进入“permisssion.js”
① 判断此时时候登陆，如果获取到token，那就表示已经登录，跳过以下代码
② 加载菜单，因为我们第一次登录成功后会去调用获取菜单接口的方法“menulist”，如下：
而这个方法在：api/system的js文件里面
即如下方法：
6. 因此根据此接口：/sys/menu/list我们又去到后台服务代码，找到相关的接口文件在“SystemController.java”
将tpye=1总平台所有的菜单列表全部查出来
① 传入token查询到customer后台用户表里面查到属于item_type=1的用户
② 再通过item_type=1查询sys_menu系统所有该类型的菜单
7. 再回到后台管理系统的前端代码
通过第六步我们得到了全部菜单列表，并赋值给“_this.menulist”变量，之后我们再调用方法“getPromise”获取该用户的角色菜单，由于在登录后我们将用户的相关信息以上第四点的第2点返回的用户数据保存到了页面缓存里面，并赋值给token变量
因此我们取出token.roleId=10这个权限ID
我们再调用接口“info(roleId)”去后台服务取数据
去“api”->“role.js”里面找接口
8. 我们再次去后台找接口数据：“RoleController.java”
以上我们是从前端传入了一个重要参数：roleId=10，传到后台的，看如下接口图：
① 我们先用roleId=10参数去查询数据库表role
这样能获取到所有该权限为管理员的所有菜单的ids，如上：“627,569...........”当然这个ids是在建立菜单管理就已经写入数据库表role里面了
同样我们根据以上获取到的菜单ids，去数据库表sys_menu菜单管理表里面获取相关菜单所有信息，包括：菜单名字及下级菜单，相应菜单的按钮值等
最后将菜单信息和相应按钮信息返回给前端
9. 前端拿到以上权限roleId=10的身份的菜单及相应按钮后将菜单缓存到变量“set_menu”里面
至此整个该用户从登陆到拿到所属的权限菜单已经分析完毕，再登陆后进入首页或任何菜单切换都需要加载菜单，如下：
从之前的缓冲变量取出菜单数据即可。OK，以上分析为完整流程分析。
