Vue-element-admin的权限和动态路由的生成对应的菜单
因为我使用的是Vue-element-template所以有的东西没有可以去admin复制过来
首先我们要过一下思路
1.登录页面按钮点击2.vuex里面的 login 方法被调用3.vuex里面的 login 方法被调用 完毕4.监听路由改变 然后获取当前登录的用户角色5.获取当前用户信息 获取角色组 并保存登录状态,返回当前角色信息6.通过 角色 和 所有路由 匹配出对应角色拥有的路由权限 返回路由组7将上面获取到的 路由权限 挂载到真实的路由上面去
然后说下参与路由权限牵扯的文件吧
/src/view/login/index.vue登录页面的入口文件
/src/store/modules/user.js vuex的文件 全局方法
/src/permission.js监听路由改变后的js
/src/store/mudules/permission.js通过 角色返回 登录角色的对应路由列表的方法
src\views\permission\components/SwitchRoles.vue切换角色的文件 这个登录不走 切换角色才会走
[if !supportLists]1、[endif]进行登录，我们来到views/login/index里里面有一个方法，从这里可以看到他进入到vuex里面去执行登录
接着我们来到store/modules/user.js中去找那个方法，这个时候我们还要引入我们的api方法并保存他的token
[if !supportLists]2、[endif]当登录完成以后，我们就来到/src/permission.js监听路由改变后的js
首先我们进入到user.js里执行获取信息的方法，来保存我们需要的一些值
当他保存完成以后，我们就可以拿到roles值了
然后我们进入到/src/store/mudules/permission.js通过 角色返回 登录角色的对应路由列表的方法
这个值我们已经保存过了，接着我们来到store/index.js里来引入这个js文件
然后我们来到store/getters中重新进行赋值
然后我们返回src下重新打印并生成动态的路由菜单，这里的值就是我们刚刚保存到getters里的数组。
最后我们来到渲染路由菜单的文件中layout/components/Sidebar/index.vue里
然后我们来rotuer/index.js里看我们的路由
接着我们看下动态路由的一些东西
我们的roles值就是我们获取用户信息里面的那个值，一定要是一样的。
接着我们看效果，这个rolse值是一样的。
接着我们换一下这个rolse值，用户中心算是首页所以是公共页面不算在动态路由中
这样就算完成了。因为我的这些接口都是真实的接口所以都是有效的，亲测。
网友评论