Vue实战078权限管理实现导航菜单动态加载

　　权限管理主要体现在对菜单、操作、页面等权限的控制，实现根据用户权限来动态显示不同的导航菜单、操作权限及页面内容等功能。菜单的动态权限控制主要用到了Vue Router和Vuex这两个技术，前端的导航菜单一般都是根据Vue Router中定义的路由表来生成的，要实现动态菜单显示其实就是实现动态路由个过程。Vuex作为Vue中的状态管理器可以用来存储从Router中筛选出可访问的动态路由并改变Router的状态。
　　​路由表定义
　　通常情况下我们都是在src/router/index.js中来定义路由表的，路由通常分为两种，一种是常规的路由（静态路由表），这部分路由所有用户都可以访问，如登录、404错误、500服务器异常等页面。另一种是权限路由（动态路由表），这部分路由需要用户被授权才能访问，我们的动态路由也是根据这部分来做权限管理的。
　　获取用户权限
　　用户权限通常都是在服务器上存储的，我们在只有登录之后才能获取到用户的相关权限。数据的请求需要通过Token的认证，所以我们需要将Token存入Vuex和Cookie中让用户保持在线状态。接着我们就可以通过Token来获取用户的相关权限，这里不直接在登录的时候获取授权菜单是为了防止刷新路由，因为路由刷新的时候Vuex中存储的数据会丢失。
　　路由拦截筛选
　　既然是根据用户权限来显示菜单，那么在访问路由之前我们就需要先获取到用户可以访问的路由信息。既然不允许访问那么自然就不应出现在导航菜单中了，所以在路由加载完成之前我们就需要对路由进行筛选。这个可以利用Vue Router的钩子函数beforeEach来实现，在beforeEach通过Token获取授权菜单信息然后进行路由筛选。
　　await关键字
　　await是个关键字，即等待的意思。await只能放到async函数里面，async关键字定义的是一个异步函数。异步函数不会阻塞后面代码的继续执行，返回的是一个promise 对象。如果要获取到promise的返回值用then获取，await则是需要等异步函数执行完成并拿到promise resolve的值之后才会继续执行的。
　　await is a reserved word错误解决
　　这里在使用await的时候遇到一个错误：await is a reserved word，提示await是一个保留的关键词。遇到这个错误的时候你就要看下你使用的await函数是否是一个async异步函数了，这里是在beforeEach()参数中忘了加async关键字修饰了。
　　生成新路由
　　创建一个GenerateRoutes方法用来生成当前用户可以访问的新路由表，先通过GetInfo从后台获取到可以访问的权限列表，再通过filterAsyncRoutes去筛选出可以访问的动态路由，并将该路由存储到Vuex去改变routes的状态从而刷新出动态的导航菜单。
　　导航菜单渲染
　　在组件中载入Vuex中的mapGetters辅助函数可以直接调用state状态中的routes属性，我们将菜单组件和Vuex中存储的路由状态进行绑定起来，当routes发生变化的时候菜单也就跟着变化了。
　　总结：
　　这里有个问题需要注意那就是从用户端获取到的权限列表存储在Vuex中时如果用户刷新路由就会丢失，所以我们在beforeEach中最好先判断一下如果Vuex中的routes丢失我们就重新新请求一次后台重新获取下权限列表。我这里因为后台还没写对应的接口所以先在登录的时候将权限列表存储在Vuex的同时存了一份在Session Storage中，state值默认从Session Storage中获取（这种方式不安全，容易被用户篡改权限，所以最好不用）。以上内容是小编给大家分享的【Vue实战078：权限管理实现导航菜单动态加载】，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。