SpringBoot实战电商项目商城（30k+star）地址：https://github.com/macrozheng/mall抽象的权限管理主要体现在后端项目中接口访问权限的控制，以及主要在前端项目中体现在对菜单访问的控制上。在《手把手教你搞定权限管理，结合Spring Security实现接口的动态权限控制！》中，我们实现了后台接口的动态权限控制。今天我们就来说说如何结合Vue实现菜单的动态权限控制。使用技术mall-admin-web实现菜单的动态权限控制使用了两种技术，一种是VueRouter，一种是Vuex。我们先来了解一下这两种技术。VueRouterVueRouter是Vue.js的官方路由管理器。路由是一个路径，当我们访问指定的路径时，就会跳转到指定的页面。我们项目的路由定义在src/router/index.js文件中。比如我们的商品列表页的路由定义如下。所以当我们访问http://localhost:8090/#/pms/product时，会跳转到产品列表页面。我们前端的左侧菜单是根据VueRouter中定义的路由表生成的。要实现动态菜单显示，其实只需要实现动态路由即可。VuexVuex是专门为Vue.js应用开发的一种状态管理模式，它使用集中存储来管理应用所有组件的状态。Vuex可以简单的理解为一个全局状态管理器，我们可以在里面存放一些全局状态。当我们在多个组件中显示这些状态时，只要有一个组件中的这个状态发生变化，基于Vue的响应式渲染，其他组件中的这个状态也会发生变化。Vuex中有几个核心概念需要了解：Store：相当于一个容器，里面包含了应用中大部分的状态；State：Store中存储的状态，因为使用的是单颗状态树，即Vuex中存储的状态只有一份。当这个状态改变时，绑定到它的组件中的状态也会改变；Getter：一些从State派生出来的状态，可以认为是State的计算属性；Mutation：状态改变，在Vuex中改变状态的唯一方法是提交一个Mutation；Action：用于提交Mutation的action，从而改变Vuex中的State；Module：Store中的一个模块，由于使用了单一的状态树，应用的所有状态都会集中在一个比较大的对象中。为了解决以上问题，Vuex允许我们将Store划分为模块。Vuex中的核心流程如下：菜单的动态权限控制下面我们就来说说如何结合VueRouter和Vuex来实现菜单的动态权限控制。首先，我们需要修改src/router/index.js中的路由表，将路由表拆分为必须显示的静态路由表和可以动态显示的动态路由表。然后我们需要添加src/store/modules/permission.js文件来为VuexStore添加权限相关的状态，比如左侧菜单绑定的路由表。这里介绍一个比较核心的GenerateRoutes方法，用于生成当前用户可以访问的路由。我们的数据参数包含用户可以访问的菜单信息。它的具体执行过程是：从菜单信息中筛选出可访问的动态路由，然后对它们进行排序，最后将状态变化提交给Vuex来改变路由器的状态。前端路由和后台菜单的匹配其实是根据路由名和菜单的前端名来决定的。例如商品列表中的路由名称和ums_menu表中存储的前端名称如下。接下来我们需要修改src/store/index.js文件，将这个权限模块的状态添加到VuexStore中。然后修改src/store/getters.js文件，在permissionmodule中为两种状态取别名，方便访问。我们还需要修改src/views/layout/components/Sidebar/index.vue文件，将左侧菜单组件绑定到Vuex中保存的路由状态，这样当我们在Vuex中修改状态时，菜单就会向上变化。mapGetters是一个辅助函数，它将Store中的Getter属性映射到本地计算属性。最后，我们需要修改保存在Vuex中的路由状态，在用户登录成功后通过store.dispatch('GenerateRoutes',{menus,username})传入用户可以访问的菜单信息。权限管理功能的demo具体参考：这次整理了大家心心念念的权限管理功能！项目源码地址https://github.com/macrozheng/mall-admin-web公众号mall项目全套学习教程正在连载中，第一时间关注公众号。
