3)用戶信息&菜單權(quán)限管理&vue項目瘦身

上章完成了與vue-element-admin的接口對接,獲取token登錄的基本功能,本章將繼續(xù)完成用戶信息&菜單權(quán)限管理相關(guān)功能
上章說過vue-element-admin的菜單權(quán)限是使用用戶角色來控制的,而這里我們不需要通過role控制,通過/api/abp/application-configuration接口的auth.grantedPolicies字段,與對應(yīng)的菜單路由綁定,進而實現(xiàn)對權(quán)限控制。
在src/store/modules/user.js 添加設(shè)置roles的方法
在src/store/modules/permission.js修改內(nèi)容如下:
在src/permission.js修改內(nèi)容如下:
同時要確保user/getInfo 接口能正常獲取到用戶信息,刷新運行項目就能正常看到菜單

目前的全部菜單并沒有被權(quán)限控制,需要給路由改造一下 在 src/router/index.js meta里面添加字段 policy: 'AbpIdentity.Roles',AbpIdentity.Roles?為 abppermissiongrants表中的一項,現(xiàn)在將這個刪除。(圖為已刪除結(jié)果)

ps:別拿constantRoutes里面的路由測試,這里的路由是公開的不受權(quán)限控制
修改完成后重啟服務(wù)端,刷新ui界面就可以看到"權(quán)限測試頁"被移除了。

權(quán)限綁定菜單到這里就差不多了,接下來是將vue項目瘦身,框架自帶的很多東西都不是我們需要的。
。刪除vue里面多余的路由與view
刪除小技巧:根據(jù)路由找到相對應(yīng)的文件夾后刪除view,如果某些組件沒有用到也可以移除
刪除完成后得到的效果


最后添加ABP自帶的身份認(rèn)證模塊
在src/touter/modules 添加 identity.js、tenant.js
在src/touter/index.js 里面添加
在src/views 里面新建identity、tenant文件夾加及相關(guān)view
最終展示效果


本章到此結(jié)束,下章將來繼續(xù)完成 UI端的權(quán)限處理,ABP與vue的國際化