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