前言:
通过vue-admin-template创建的项目中并没有与权限配置相关的文件和代码,需要手动去vue-emement-admin拷贝部分代码
拷贝开始
1、对比模板代码就知道Vuex文件管理的文件夹store下面很多内容有更改,所以直接复制过来,权限文件主要是permission,但是在getters和user里面也添加了内容
2、然后左侧菜单是动态加载的,需要在菜单page调用vuex,拷贝layout/components/Sldebar/index.vue;也是整个文件复制
3、根目录下的src/permission.js,同样直接复制即可
登陆流程分析
在views/login/index.vue页面设置登陆点,进入提交一个vuex的action
在vuex的action中提交登陆
去api/user.js中调用login方法
后台逻辑处理部分,返回状态码
作者在前端设置了axios的全局拦截器,将收到的状态码做逻辑判断code正确再返回
如果经过拦截器,说明返回成功,进入api/user/login的成功的回调返回给vuex中user/login方法,将token保存到vuex,设置cookie
然后在views/login/index.vue页面进入vuex中login action的成功回调,处理重定向
然后进入permission.js中间件,根据返回的token到vuex的action的user/getInfo调接口api/user/getInfo
然后去vuex的getInfo的action中调用api/user/getInfo接口往后端发请求
后端先简单处理请求,后返回
前端同样是经过Axios拦截器处理过滤,过滤之后回store/user/getinfo,即接口api/getInfo的回调中,如果有data,则去设置全局头像,名字信息等信息。没有就reject。处理返程回到permission.js,将返回的结果中的role信息提取出来,后面动态生成路由菜单
然后去vuex,执行permission/generateRoutes方法,根据返回回来的权限,加载可以访问的路由,通过router.addRoutes()方法动态挂载路由
然后再Slidebar中通过vuex获取路由表,加载出来
爬坑:
有一个问题困扰我很久,页面刷新之后,就进入404页面,
最后经过各种调试发现这里404应该放最后,放到asyncRoutes中,因为这个模板开始是没有动态路由的,404页面在constantRoutes中,而现在采用的权限控制,需要放到asyncRoutes中的最后。
其实在官方文档也有说明该问题,只是开始没注意: