vue+vue-router+vuex，利用vue-router2.2.0新增特性addRoutes实现路由动态加载，菜单动态加载，运用于后台管理系统，路由数据取自数据库

素颜马尾好姑娘i 2022-05-21 11:22 19阅读 0赞

#     #

此案例主要实现了一个功能是，在vue实例首次运行时，在加载了login和404两个路由规则，登录成功后，根据登录用户角色权限获取该角色相应菜单权限，生成新的路由规则添加进去。

做过后台管理系统都一定做过这个功能，在对菜单权限进行粗粒度权限控制的时候，通过角色获取菜单后，异步生成菜单，所以一开始拿到需求的时候，我也以为这和平常的没什么不同，不过做起来就发现了很多问题，

1.vue-router的实例，在new vue实例的时候，就加载了，且必须加载，这个时候，登录路由一定要加载，可是这个时候没有登录，无法确定权限  
2.路由规则与菜单的同步

解决思路演化，菜单和路由同步，肯定是采用了vuex，一开始的思路的是，在一开始，就把所有的路由规则加载，然后在登录的时候，取得权限路由，对比两个路由，通过修改修改一个权限字段来隐藏菜单，如果在后台页面添加了新菜单规则，路由是按模块加载的不同的文件，这时对路由的文件进行新的读写，虽然可以解决问题，但是如果手动在浏览器地址上路由，依然可以访问，所以在路由的全局钩子上还要做拦截。

这个解决方案虽然解决，但是显的比较复杂，于是就想需找新的方法，重新浏览官方api，发现在2.2.0以后，官方新增了api，addRoutes，专门针对服务端渲染路由，那么这下问题就比较简单了，下面列出实现代码。以下代码不能直接复用，需要根据实际情况修改，只是提供思路

app.js

1.  let permission = JSON.parse( window.sessionStorage.getItem( 'permission'))
2.  if (permission) \{
3.  store.commit(ADD\_MENU, permission)
4.  router.addRoutes(store.state.menu.items)
5.  \}
6.  router.beforeEach( (route, redirect, next) => \{
7.  if (state.app.device.isMobile && state.app.sidebar.opened) \{
8.  store.commit(TOGGLE\_SIDEBAR, false)
9.  \}
10. if (route.path === '/login') \{
11. window.sessionStorage.removeItem( 'user')
12. window.sessionStorage.removeItem( 'permission')
13. store.commit(ADD\_MENU, \[\])
14. \}
15. let user = JSON.parse( window.sessionStorage.getItem( 'user'))
16. if (!user && route.path !== '/login') \{
17. next(\{ path: '/login' \})
18. \} else \{
19. if (route.name) \{
20. next()
21. \} else \{
22. next(\{ path: '/nofound' \})
23. \}
24. \}
25. \})

登录的组件login.vue

1.  <template>
2.  <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px"
3.  class= "demo-ruleForm login-container">
4.  <h3 class="title">系统登录 </h3>
5.  <el-form-item prop="account">
6.  <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"> </el-input>
7.  </el-form-item>
8.  <el-form-item prop="checkPass">
9.  <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"> </el-input>
10. </el-form-item>
11. <el-checkbox v-model="checked" checked class="remember">记住密码 </el-checkbox>
12. <el-form-item style="width:100%;">
13. <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录
14. </el-button>
15. **
16. </el-form-item>
17. </el-form>
18. </template>
19. 
20. <script> 
21. import NProgress from 'nprogress'
22. import \{ mapActions, mapGetters \} from 'vuex'
23. export default \{
24. data () \{
25. return \{
26. logining: false,
27. ruleForm2: \{
28. account: 'admin',
29. checkPass: '123456'
30. \},
31. rules2: \{
32. account: \[
33. \{ required: true, message: '请输入账号', trigger: 'blur'\}
34. *// \{ validator: validaePass \}*
35. \],
36. checkPass: \[
37. \{ required: true, message: '请输入密码', trigger: 'blur'\}
38. *// \{ validator: validaePass2 \}*
39. \]
40. \},
41. checked: true
42. \}
43. \},
44. computed: \{
45. ...mapGetters(\[
46. 'menuitems',
47. 'isLoadRoutes'
48. *// ...*
49. \])
50. \},
51. methods: \{
52. handleReset2 () \{
53. this.$refs.ruleForm2.resetFields()
54. \},
55. handleSubmit2 (ev) \{
56. this.$refs.ruleForm2.validate( (valid) => \{
57. if (valid) \{
58. this.logining = true
59. NProgress.start()
60. let loginParams = \{ loginName: this.ruleForm2.account, password: this.ruleForm2.checkPass\}
61. this.$http.post( '/api/privilege/user/login', loginParams).then( resp => \{
62. this.logining = false
63. NProgress.done()
64. let \{message, data\} = resp.data
65. 
66. if (message === 'fail') \{
67. this.$notify(\{
68. title: '错误',
69. message: message,
70. type: 'error'
71. \})
72. \} else \{
73. window.sessionStorage.setItem( 'user', JSON.stringify(data.user))
74. window.sessionStorage.setItem( 'permission', JSON.stringify(data.permission))
75. this.addMenu(data.permission)
76. if (! this.isLoadRoutes) \{
77. this.$router.addRoutes( this.menuitems)
78. this.loadRoutes()
79. \}
80. this.$router.push( '/system/office')
81. \}
82. \})
83. \} else \{
84. console.log( 'error submit!!')
85. return false
86. \}
87. \})
88. \},
89. 
90. ...mapActions(\[
91. 'addMenu',
92. 'loadRoutes'
93. \])
94. \}
95. \}
96. 
97. </script>
98. 
99. <style lang="scss" scoped> 
100. .login-container \{
101. /\*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);\*/
102. \-webkit-border-radius: 5px;
103. border-radius: 5px;
104. \-moz-border-radius: 5px;
105. background-clip: padding-box;
106. margin-bottom: 20px;
107. background-color: \#F9FAFC;
108. margin: 180px auto;
109. border: 2px solid \#8492A6;
110. width: 350px;
111. padding: 35px 35px 15px 35px;
112. 
113. .title \{
114. margin: 0px auto 40px auto;
115. text-align: center;
116. color: \#505458;
117. \}
118. 
119. .remember \{
120. margin: 0px 0px 35px 0px;
121. \}
122. 
123. \}
124. </style>

关键点解释

1.  computed: \{
2.  ...mapGetters(\[
3.  'menuitems',
4.  'isLoadRoutes'
5.  *// ...*
6.  \])
7.  \},

这里是从vuex取得两个对象，menuitems是菜单对象，isLoadRoutes是用来判断是否是第一次登录，用来排除重复加载路由规则

1.  ...mapActions(\[
2.  'addMenu',
3.  'loadRoutes'
4.  \])

这里是从vuex取得两个方法，一个是添加菜单，一个更改loadRoutes的值

this.$router.addRoutes(this.menuitems)

这是关键api，动态的向router实例中添加路由规则

menu模块的state与mutations

1.  const state = \{
2.  items: \[
3.  \],
4.  isLoadRoutes: false
5.  \}
6.  
7.  const mutations = \{
8.  \[types.EXPAND\_MENU\] (state, menuItem) \{
9.  if (menuItem.index > \-1) \{
10. if (state.items\[menuItem.index\] && state.items\[menuItem.index\].meta) \{
11. state.items\[menuItem.index\].meta.expanded = menuItem.expanded
12. \}
13. \} else if (menuItem.item && 'expanded' in menuItem.item.meta) \{
14. menuItem.item.meta.expanded = menuItem.expanded
15. \}
16. \},
17. \[types.ADD\_MENU\] (state, menuItems) \{
18. if (menuItems.length === 0) \{
19. state.items = \[\]
20. \} else \{
21. generateMenuItems(state.items, menuItems)
22. \}
23. \},
24. \[types.LOAD\_ROUTES\] (state) \{
25. state.isLoadRoutes = !state.isLoadRoutes
26. \}
27. \}

路由配置文件router.js

1.  import Vue from 'vue'
2.  import Router from 'vue-router'
3.  import menuModule from 'vuex-store/modules/menu'
4.  Vue.use(Router)
5.  
6.  export default new Router(\{
7.  mode: 'hash', *// Demo is living in GitHub.io, so required!*
8.  linkActiveClass: 'is-active',
9.  scrollBehavior: () => (\{ y: 0 \}),
10. routes: \[
11. \{
12. path: '/login',
13. component: require( '../Login.vue'),
14. meta: \{
15. expanded: false,
16. show: false
17. \},
18. name: 'Login'
19. \},
20. \{
21. path: '/',
22. component: require( '../views/Home.vue'),
23. meta: \{
24. expanded: false,
25. show: false
26. \},
27. children: \[
28. \{ path: '/nofound', component: require( '../404.vue'), name: 'NOFOUND', meta: \{ show: false\} \}
29. \]
30. \},
31. ...generateRoutesFromMenu(menuModule.state.items)
32. \]
33. \})
34. 
35. *// Menu should have 2 levels.*
36. function generateRoutesFromMenu (menu = \[\], routes = \[\]) \{
37. for ( let i = 0, l = menu.length; i < l; i++) \{
38. let item = menu\[i\]
39. if (item.path) \{
40. routes.push(item)
41. \}
42. \}
43. return routes
44. \}

vuex

1.  import Vue from 'vue'
2.  import Vuex from 'vuex'
3.  import \* as actions from './actions'
4.  import \* as getters from './getters'
5.  
6.  import menu from './modules/menu'
7.  
8.  Vue.use(Vuex)
9.  
10. const store = new Vuex.Store(\{
11. strict: true, *// process.env.NODE\_ENV !== 'development',*
12. actions,
13. getters,
14. modules: \{
15. menu
16. \},
17. mutations: \{
18. \}
19. \})
20. 
21. export default store

actions

1.  export const addMenu = (\{ commit \}, menuItems) => \{
2.  if (menuItems.length > 0) \{
3.  commit(types.ADD\_MENU, menuItems)
4.  \}
5.  \}
6.  
7.  export const loadRoutes = (\{ commit \}) => \{
8.  commit(types.LOAD\_ROUTES)
9.  \}

getters

1.  const menuitems = state => state.menu.items
2.  const isLoadRoutes = state => state.menu.isLoadRoutes
3.  export \{
4.  menuitems,
5.  isLoadRoutes
6.  \}

mutations\_type.js

1.  export const ADD\_MENU = 'ADD\_MENU'
2.  
3.  export const LOAD\_ROUTES = 'LOAD\_ROUTES'

因为上面的代码不能直接运行，再次梳理一下思路，

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来就可以了，我这里没有贴我的，实际根据自己的需求来

<a href="https://github.com/yayunD/dynamicRouter "></a>前往git上面下载源码，源码里面有更多改进的地方，修复一些bug，去除了vuex，比较简洁，只是实现了动态路由了，为了快速构建ui，用到了饿了么的UI库