Vue-router+Vuex动态加载路由与菜单权限控制实践

"本文主要探讨如何使用vue-router和vuex实现动态加载路由及菜单功能，特别是在用户登录后根据角色权限动态生成相应的路由规则。在实际操作中，会遇到路由实例初始化时无法确定权限以及路由规则与菜单同步的问题。通过引入vuex进行状态管理，并利用vue-router的addRoutes方法，可以在运行时动态添加路由，从而简化解决方案。" 在构建后台管理系统时，动态加载路由和菜单权限控制是常见需求。通常，系统会先加载如登录页和404错误页的基础路由，用户登录成功后，根据其角色权限生成对应的菜单项和路由。然而，这一过程存在两个关键问题： 1. **路由实例的初始化**：vue-router的实例在创建Vue实例时就需要加载，此时用户还未登录，无法获取权限信息。这就意味着基础路由如登录页必须提前加载，但无法确定哪些路由应向未登录用户开放。 2. **路由规则与菜单的同步**：理想情况下，路由规则应与用户权限匹配的菜单同步。一开始可能设想在启动时加载所有路由，然后在登录后根据权限隐藏菜单，但这可能导致对未授权页面的直接访问，尤其是在动态添加新路由时。 为了解决这些问题，可以采用vuex来管理全局状态，将菜单和路由同步。最初的解决方案可能是先加载所有路由，然后在登录后通过比较权限路由来隐藏不匹配的菜单。然而，这种方法需要在路由文件中频繁读写，且无法阻止直接通过浏览器地址栏访问未授权路由。 幸运的是，从vue-router 2.2.0版本开始，官方引入了`addRoutes`方法，专门用于服务端渲染的动态路由添加。这个方法允许我们在运行时安全地添加路由，解决了之前方案的复杂性。以下是简化的实现代码示例： ```javascript // app.js let permission = JSON.parse(window.sessionStorage.getItem('permission')); if (permission) { store.commit('ADD_MENU', permission); router.addRoutes(store.state.menu.items); } // 路由全局守卫 router.beforeEach((to, from, next) => { // ... }); ``` 这段代码展示了如何在用户登录并获取权限后，使用`addRoutes`添加动态路由，并通过vuex存储和管理菜单。`beforeEach`全局守卫则可以进一步确保未授权的路由不会被访问。 结合vue-router的`addRoutes`和vuex，可以实现更加灵活且安全的动态路由加载和菜单同步。这不仅解决了权限问题，还避免了不必要的复杂性，提高了系统的可维护性和用户体验。