SideBar加载其实就是根据传入的路由表进行判断,源码中组件多了点,笔记放到后续单独整理
权限加载及自定义布局
加载过程
页面加载过程考虑涉及了页面的加载、菜单加载、用户权限问题,所以先考虑问题如下:
- 用户登陆成功后,通过NProgess拦截获取用户token,判断是否有token
- 获取用户登陆信息,获取用户的roles,进入路由表拉取用户菜单(动态的权限菜单)
- 有权限后进入首页(布局页面),布局中的Sidebar根据获取的有路有权限的菜单进行动态生成
改造router
将router中的路由分为静态无需权限路由和动态加载的权限路由,同时将返回默认页定位到dashBoard的首页。其中路由先按照要求将meta下的属性都进行配置。这个在后期测试时发现一个问题。
当页面加载完后,使用新的浏览器TAB页打开一个动态加载的菜单时,页面并没有加载,并返回到了404页面。但浏览器地址栏的URL是正确且存在的。
经过仔细比较vue-element-admin的源码后,发现了关于404的代码注释。且404的路由是放到了动态加载的路由的最后面
经过查看vue-router的文档发现官方的说明如下:
当使用通配符路由时,请确保路由的顺序是正确的,也就是说含有通配符的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误。如果你使用了History 模式,请确保正确配置你的服务器。
添加JS-COOKIE
设计思路如下:用户登录后将token存储到cookie中,用户登陆后加载所具有权限的菜单,此时用户角色需要通过api来获取,前端不存储任何角色信息
安装
修改用户登陆,把用户token放入cookie。在utils下建立auth.js用来操作cookie。此处遇到了同源 同协议 同Domain但不同端口的cookie问题,后续需要看看如何处理
修改用户登陆,增加获取用户信息的API
用户登陆和获取用户信息的方法在vuex中完成,修改stroe>modules>user.js如下:
同时,将Mock使用的api请求抽取出来单独存放,在src目录下新建api目录,建立user.js文件用来向后端请求,src>api>user.js文件如下:
此时用户角色的登陆修改完毕,下面来根据token判断用户是否登陆。
权限拦截
安装nprogress进度条
在src下新建permission.js,先通过cookie获取用户token,如果有token,在通过getter从store中获取用户的roles,用户有权限,则继续请求。如果store中取的roles为空,则通过user.js中的action再次获取一下,并根据取到的角色加载响应的路由表。这里需要vue-router的导航守卫,并结合nprogress的进度条来完成。permission.js代码如下:
代码基本都是element-vue-admin中的源码,个人测试的地方修改的很小。在获取用role的时候使用了store中的getter,这里是配置了getter.js并注册到vuex中。
在src>store>getter.js中,同时也配置了权限相关的参数。代码如下:
修改src>store>index.js文件。这里没有使用源码的自动注册,后期如果代码量大了在修改。
权限的获取
根据上面src>permission.js中的代码逻辑,其中在获取完用户的角色后需要根据角色获取路由表中的具有权限的路由,所以在vuex中增加方法来处理用户路由表的动态加载。在src>store>modules中新建permission.js文件,并注册。permission.js如下。总体逻辑比较清晰,根据用户的角色,然后与路由表中的meta元素中的roles进行判断,最后通过SET_ROUTES组合路由表
创建页面布局
上面已经获取了
页面布局思路为:
- AppMain 右侧主要显示区域
- Navbar 右侧顶部标题、个人设置等
- Sidebar 左侧菜单页面
- TagsView 右侧NavBar下面,用户打开的标签页
- RightPanel 右侧setting个性化的区域
涉及的布局的主要代码在src>layouts下。layout中的index.vue为总体的布局框架,通过router加载component的在AppMain.vue中。src>layouts>index.vue代码如下:
在element-vue-admin中的源码,首页加载有个resize的过程,这里省略了。同时直接引入了siderbar的样式。RightPanel是右侧自定义的功能区。暂时只是把组件添加上了。Navbar、TagsView也暂时用组件占位,没添加内容。
AppMain
AppMain.vue在src>layouts>components下。代码比较简单,暂时去掉了cacheViews的配置,省略了样式部分