vue-element-template的权限和动态菜单栏

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值,用户中心算是首页所以是公共页面不算在动态路由中



这样就算完成了。因为我的这些接口都是真实的接口所以都是有效的,亲测。

你可能感兴趣的:(vue-element-template的权限和动态菜单栏)