此案例主要实现了一个功能是,在vue实例首次运行时,在加载了login和404两个路由规则,登录成功后,根据登录用户角色权限获取该角色相应菜单权限,生成新的路由规则添加进去。
做过后台管理系统都一定做过这个功能,在对菜单权限进行粗粒度权限控制的时候,通过角色获取菜单后,异步生成菜单,所以一开始拿到需求的时候,我也以为这和平常的没什么不同,不过做起来就发现了很多问题,
1.vue-router的实例,在new vue实例的时候,就加载了,且必须加载,这个时候,登录路由一定要加载,可是这个时候没有登录,无法确定权限 2.路由规则与菜单的同步
解决思路演化,菜单和路由同步,肯定是采用了vuex,一开始的思路的是,在一开始,就把所有的路由规则加载,然后在登录的时候,取得权限路由,对比两个路由,通过修改修改一个权限字段来隐藏菜单,如果在后台页面添加了新菜单规则,路由是按模块加载的不同的文件,这时对路由的文件进行新的读写,虽然可以解决问题,但是如果手动在浏览器地址上路由,依然可以访问,所以在路由的全局钩子上还要做拦截。
这个解决方案虽然解决,但是显的比较复杂,于是就想需找新的方法,重新浏览官方api,发现在2.2.0以后,官方新增了api,addRoutes,专门针对服务端渲染路由,那么这下问题就比较简单了,下面列出实现代码。以下代码不能直接复用,需要根据实际情况修改,只是提供思路
app.js
登录的组件login.vue
关键点解释
这里是从vuex取得两个对象,menuitems是菜单对象,isLoadRoutes是用来判断是否是第一次登录,用来排除重复加载路由规则
这里是从vuex取得两个方法,一个是添加菜单,一个更改loadRoutes的值
这是关键api,动态的向router实例中添加路由规则
menu模块的state与mutations
[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
}
}
路由配置文件router.js
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
Vue.use(Vuex)
const store = new Vuex.Store({
strict: true,// process.env.NODE_ENV !== 'development',actions,getters,modules: {
menu
},mutations: {
}
})
export default store
actions
export const loadRoutes = ({ commit }) => {
commit(types.LOAD_ROUTES)
}
getters
mutations_type.js
因为上面的代码不能直接运行,再次梳理一下思路,
1.创建vue实例的时候,将vuex和vue-router加载,这个时候,vue-router只有登录规则和404规则
2.vuex中state管理的状态对象有,菜单对象menuitems,是否加载过路由loadRoutes ,并提供相应的getters与actions当然还有一些其他的,这里没有列举
3.然后在登录组件中,登录成功后,将服务端传回来之后,调用actions更改state.menuitems,并且中间有格式化的过程,这个过程的代码没有贴出来,主要是由于不同的表涉和服务端返回的数据不一样,,
4.然后调用addRoutes和actions更改已经加载过路由的方法
5.然后为了防止用户直接手动按f5刷新页面,这个时候会重新构建vue实例,而又没有重新登录,所以vuex里面的东西会清空,所以将登录后的数据存放在sessionStroage中,在刷新页面,重新构建vue实例的时候,会有判断
6.之后会渲染侧边栏组件,列出菜单,数据就可以根据state.menuitems来就可以了,我这里没有贴我的,实际根据自己的需求来