此案例主要实现了一个功能是，在vue实例首次运行时，在加载了login和404两个路由规则，登录成功后，根据登录用户角色权限获取该角色相应菜单权限，生成新的路由规则添加进去。@H_301_1@
做过后台管理系统都一定做过这个功能，在对菜单权限进行粗粒度权限控制的时候，通过角色获取菜单后，异步生成菜单，所以一开始拿到需求的时候，我也以为这和平常的没什么不同，不过做起来就发现了很多问题，@H_301_1@
1.vue-router的实例，在new vue实例的时候，就加载了，且必须加载，这个时候，登录路由一定要加载，可是这个时候没有登录，无法确定权限 2.路由规则与菜单的同步@H_301_1@
解决思路演化，菜单和路由同步，肯定是采用了vuex，一开始的思路的是，在一开始，就把所有的路由规则加载，然后在登录的时候，取得权限路由，对比两个路由，通过修改修改一个权限字段来隐藏菜单，如果在后台页面添加了新菜单规则，路由是按模块加载的不同的文件，这时对路由的文件进行新的读写，虽然可以解决问题，但是如果手动在浏览器地址上路由，依然可以访问，所以在路由的全局钩子上还要做拦截。@H_301_1@
这个解决方案虽然解决，但是显的比较复杂，于是就想需找新的方法，重新浏览官方api，发现在2.2.0以后，官方新增了api，addRoutes，专门针对服务端渲染路由，那么这下问题就比较简单了，下面列出实现代码。以下代码不能直接复用，需要根据实际情况修改，只是提供思路@H_301_1@
app.js@H_301_1@
关键点解释 @H_301_1@
这里是从vuex取得两个对象，menuitems是菜单对象，isLoadRoutes是用来判断是否是第一次登录，用来排除重复加载路由规则@H_301_1@
这里是从vuex取得两个方法，一个是添加菜单，一个更改loadRoutes的值@H_301_1@
这是关键api，动态的向router实例中添加路由规则@H_301_1@
menu模块的state与mutations@H_301_1@
[types.EXPAND_MENU] (state,menuItem) {
if (menuItem.index > -1) {
if (state.items[menuItem.index] && state.items[menuItem.index].Meta) {
state.items[menuItem.index].Meta.expanded = menuItem.expanded
}
} else if (menuItem.item && 'expanded' in menuItem.item.Meta) {
menuItem.item.Meta.expanded = menuItem.expanded
}
},[types.ADD_MENU] (state,menuItems) {
if (menuItems.length === 0) {
state.items = []
} else {
generateMenuItems(state.items,menuItems)
}
},[types.LOAD_ROUTES] (state) {
state.isLoadRoutes = !state.isLoadRoutes
}
}
mode: 'hash',// Demo is living in GitHub.io,so required!
linkActiveClass: 'is-active',scrollBehavior: () => ({ y: 0 }),routes: [
{
path: '/login',component: require('../Login.vue'),Meta: {
expanded: false,show: false
},name: 'Login'
},{
path: '/',component: require('../views/Home.vue'),children: [
{ path: '/nofound',component: require('../404.vue'),name: 'NOFOUND',Meta: {show: false} }
]
},...generateRoutesFromMenu(menuModule.state.items)
]
})
// Menu should have 2 levels.
function generateRoutesFromMenu (menu = [],routes = []) {
for (let i = 0,l = menu.length; i < l; i++) {
let item = menu[i]
if (item.path) {
routes.push(item)
}
}
return routes
}
vuex @H_301_1@
Vue.use(Vuex)
const store = new Vuex.Store({
strict: true,// process.env.NODE_ENV !== 'development',actions,getters,modules: {
menu
},mutations: {
}
})
export default store
actions @H_301_1@
export const loadRoutes = ({ commit }) => {
commit(types.LOAD_ROUTES)
}
getters @H_301_1@
mutations_type.js @H_301_1@
因为上面的代码不能直接运行，再次梳理一下思路，@H_301_1@
1.创建vue实例的时候，将vuex和vue-router加载，这个时候，vue-router只有登录规则和404规则@H_301_1@
2.vuex中state管理的状态对象有，菜单对象menuitems，是否加载过路由loadRoutes ，并提供相应的getters与actions当然还有一些其他的，这里没有列举@H_301_1@
3.然后在登录组件中，登录成功后，将服务端传回来之后，调用actions更改state.menuitems,并且中间有格式化的过程，这个过程的代码没有贴出来，主要是由于不同的表涉和服务端返回的数据不一样，，@H_301_1@
4.然后调用addRoutes和actions更改已经加载过路由的方法@H_301_1@
5.然后为了防止用户直接手动按f5刷新页面，这个时候会重新构建vue实例，而又没有重新登录，所以vuex里面的东西会清空，所以将登录后的数据存放在sessionStroage中，在刷新页面，重新构建vue实例的时候，会有判断@H_301_1@
6.之后会渲染侧边栏组件，列出菜单，数据就可以根据state.menuitems来就可以了，我这里没有贴我的，实际根据自己的需求来@H_301_1@
后面有时间会在github上上传完整代码。 @H_301_1@
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。@H_301_1@ 原文链接：https://www.f2er.com/vue/36055.html
