本篇文章为大家展示了使用vue-router怎么实现权限控制,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
- <李>
菜单权限,根据不同权限显示不同的菜单
李> <李>操作权限,比如有些账号没有新增权限,有些没有修改或者删除权限
李> <李>数据权限,比如统计概况,普通管理员不能看到公司营业概况,但能看到自己所属区域的概况
李> <李>显示权限,比如列表,运营能看到那一列的签约金额,但市场不能看到签约金额这一列
李>到目前为止还在构建中,已经解决菜单权限和操作权限。
菜单权限:
最开始的时候也是按照楼上给出的方法,本地先配置一套路由,然后登陆成功后会从服务器返回一个菜单列表,然后在beforeEach里面把返回的菜单列表和本地配置的路由进行对比,如果存在则有权限访问。做了几天发现很难用,本地得配置一整套路由,还得做几个页面来把这些路由信息写入到服务器,这样来进行权限分配,当你的权限菜单比较多的时候,像我们这个后台,光公司内部权限就有好几套,还有代理商,商家权限等等,不同的菜单可能会超过几百个,这样配置太累了,还容易出错。
最后的解决思路是完全不在本地做任何路由配置,登录页面单独弄,不放到vue组件里面,登录成功后从后台抓取菜单列表,因为现在是已经登录成功了,所以抓取的就是拥有全新的菜单。抓取成功后在配置到路由里面,然后实例化vue,这样就避免了本地配置一套路由了,完全是服务器上面配置路由。
这样解决的难点只有一个,那就是路由需要对应的组件,所以我们将所有组件存放到一个对象里面,服务器的返回的菜单列表里面,会有一个字段配置组件名,在抓取成功后生成路由配置的时候就使用路由器(menuName)就能直接加载到这个组件,非常方便。
主要。js代码片段:
//,实例化登录类并初始化 ,new 登录(function (呃,,数据),{ if 才能;(错),{ ,,//,登录出的错 ,,},{else ,,//,登录成功 ,,init(数据); ,,} ,}).init (); const init =, function (数据),{ ,//先配置路由信息 ,//componentConfigs 是本地的组件配置 ,let routers =, assignRouter (componentConfigs data.menus也); ,//实例化路由=,,router  new 路由器({路线:路由器}); ,//再实例化vue ,Vue ({new el才能:& # 39;#应用# 39; 商店,才能 路由器,才能 nprogress才能, ……才能应用 ,}); };
componentConfigs。js代码片段:
export default { ,常见的:{ ,,管理:要求(& # 39;vue/页面/共同/. ./. ./行政与# 39;), 指数:才能,要求(& # 39;vue/页面/共同/. ./. ./指数# 39;), UpdatePassword才能:r =祝辞,require.ensure([],,(),=祝辞,r(要求(& # 39;vue/页面/用户/. ./. ./UpdatePassword& # 39;)),, & # 39;用户# 39;) ,} }
服务器返回的菜单json:
其中元字段里面是当前路由里的操作权限
[{ ,,,,,“path":,“\/admin \/index" ,,,,,“name":,“\ u9996 \ u9875" ,,,,,“component":,“Common.Index" ,,,,,“display":,真的, ,,,,,“icon":,“icon-home" ,,,},{ ,,,,,“path":,“\/admin \/updatePassword" ,,,,,“name":,“\ u4fee \ u6539 \ u5bc6 \ u7801" ,,,,,“component":,“Common.UpdatePassword" ,,,,,“display":假 ,,,},{ ,,,,,“path":,“\/admin \/commodity" ,,,,,“name":,“\ u5546 \ u54c1 \ u7ba1 \ u7406" ,,,,,“component":,“Content" ,,,,,“display":,真的, ,,,,,“icon":,“icon-class" ,,,,,“children":, [{ ,,,,,,,“path":,“\/admin \/商品\/publicWarehouse", ,,,,,,,“name":,“\ u516c \ u5171 \ u5e93 \ u7ba1 \ u7406", ,,,,,,,“component":,“Commodity.PublicWarehouse" ,,,,,,,“display":,真的, ,,,,,,,“meta":, {“handleAuth": {“add":真的,,“edit":,假,,“del":,真正}} ,,,,,},{ ,,,,,,,“path":,“\/admin \/商品\/businessesWarehouse", ,,,,,,,“name":,“\ u5546 \ u5bb6 \ u5e93 \ u7ba1 \ u7406", ,,,,,,,“component":,“Commodity.BusinessesWarehouse" ,,,,,,,“display":,真的, ,,,,,,,“meta":, {“handleAuth": {“add":真的,,“edit":,假,,“del":,真正}} ,,,,,}] ,,,}]使用vue-router怎么实现权限控制