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这个方法。可以根据不同的需求去设置。

你可能感兴趣的:(vue后台权限管理)