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

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