vue后台权限管理

需要用到vuex和路由全局前置守卫router.beforeEach以及路由操作router.addRoutes共同完成

首先我们的views目录结构为

其中我们设定Home页面以及Private页面不需要权限均可访问,其余的为有权限才可以访问。

设定router里面的路由为

定义asyncRouterMap为异步路由表,也是我们需要权限才可以访问的内容。

既然要设定权限必然需要路由的前置导航守卫,新建文件permission.js和main.js同级。

在store里面为

代码里面的注释已经很详细了,不一一解释了。需要代码可以访问https://gitee.com/brave-uncle-qin/pro_cms.git

这样我们就实现了权限的设置,没有页面的访问权限,即使知道路由,也是访问不到的。关于跳转按钮的隐藏设置就要用到自定义指令去设置了。

在使用过程中,可能会遇到后台返回的层级列表,这样也是可以在此基础上去更改。需要更改filterAsyncRouter这个方法。可以根据不同的需求去设置。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容