需求
最近接手一个后台管理系统, 需要实现导航菜单从后台拉取的效果; 根据登录用户的权限不同分别拉出来的导航菜单也不一样, 另外可操作的界面也存在区别.
问题
因为后台管理系统是准备使用 vue+vue-router+element-ui+vuex 的搭配来做的, 可是单页应用在进入页面之前就已经将 vue-router 实例化并且注入 vue 实例中了, 所以在进入登录页面的时候旧没办法在重新定制路由了. 接下来各种百之谷之, 发现 vue-router 在 2.0 版本中提供了 addRoutes 方法添加路由, 希望的曙光出现.
经过一番折腾终于实现了功能, 记录下来便于回顾, 也希望能帮助到同样有需求的同志.
思路
1, 首先在本地配置好固定不变的路由地址, 例如登录, 404 这些页面, 如下:
- import Vue from 'vue'
- import Router from 'vue-router'
- import store from '@/vuex/store'
- Vue.use(Router)
- let router = new Router({
- routes: [
- {
- path: '/login',
- name: 'login',
- meta: {requireAuth: false},
- // 模块使用异步加载
- component: (resolve) => require(['../components/login/login.vue'], resolve)
- }]
- })
- // 拦截登录, token 验证
- router.beforeEach((to, from, next) => {
- if (to.meta.requireAuth === undefined) {
- if (store.state.token) {
- next()
- } else {
- next({
- path: '/login'
- })
- }
- } else {
- next()
- }
- })
- export default router
配置好这些固定的路由后我们才能够到登录页面, 不然是无法继续下去的.
2, 然后重要的一步, 我们需要跟后端老铁约定好需要返回的权限菜单列表信息; 首先这里我们先分析一下自己需要的路由结构, 这里以我自己的路由作为例子. 如果是我自己直接定义路由的话, 会是以下结构:
- let router = new Router({
- routes: [
- {
- path: '/login',
- name: 'login',
- meta: {requireAuth: false},
- component: (resolve) => require(['../components/login/login.vue'], resolve)
- },
- {
- path: '/',
- redirect: '/layout'
- },
- {
- path: '/layout',
- component: (resolve) => require(['../layout.vue'], resolve),
- children: [
- {
- path: 'index',
- meta: {
- type: '1', // 控制是否显示隐藏 1 显示, 2 隐藏
- code: 00010001, // 后面需要控制路由高亮
- title: '首页', // 菜单名称
- permissonList: [] // 权限列表
- }
- component: (resolve) => require(['@/components/index/index.vue'], resolve)
- },
- {
- ...
- }
- ]
- }]
- })
根据以上结构分析, 其实真正需要动态配置的路由其实是 / layout 下面的 children 部分, 所以需要后端返回给我们包含所有路由的一个数组就可以了
返回的数据中 rootList 中是一级导航的列表, 一级导航实际是没有路由功能, 只是作为切换二级菜单的触发器, subList 才是我们真正需要的路由信息.
3, 拿到权限路由信息后, 需要我们在本地对数据进行处理组装成我们需要的数据:
- // 登录
- login () {
- let params = {
- account: this.loginForm.username,
- password: encrypt(this.loginForm.password)
- }
- this.loading = true
- this.$http.post(this.$bumng + '/login', this.$HP(params))
- .then((res) => {
- this.loging = false
- console.info('菜单列表:', res)
- if (res.resultCode === this.$state_ok) {
- // 合并一级菜单和二级菜单, 便于显示
- let menus = handleMenu.mergeSubInRoot(res.rootList, res.subList)
- // 本地化处理好的菜单列表
- this.saveRes({label: 'menuList', value: menus})
- // 根据 subList 处理路由
- let routes = handleMenu.mergeRoutes(res.subList)
- // 本地化 subList, 便于在刷新页面的时候重新配置路由
- this.saveRes({label: 'subList', value: res.subList})
- // 防止重复配置相同路由
- if (this.$router.options.routes.length <= 1) {
- this.$router.addRoutes(routes)
- // this.$router 不是响应式的, 所以手动将路由元注入路由对象
- this.$router.options.routes.push(routes)
- }
- this.$router.replace('/layout/index')
- }
- })
- .catch((err) => {
- this.loging = false
- console.error('错误:', err)
- })
- },
处理菜单列表和 subList 的方法: mergeSubInRoot 和 mergeRoutes
- const routes = [
- {
- path: '/',
- redirect: '/layout'
- },
- {
- path: '/layout',
- component: (resolve) => require(['../layout.vue'], resolve),
- children: []
- }
- ]
- export default {
- /**
- * 合并主菜单和子菜单
- * @param: rootList [Array] 主菜单列表
- * @param: subList [Array] 子菜单
- * */
- mergeSubInRoot (roots, subs) {
- if (roots && subs) {
- for (let i = 0; i <roots.length; i++) {
- let rootCode = roots[i].code
- roots[i].children = []
- for (let j = 0; j < subs.length; j++) {
- if (rootCode === subs[j].code.substring(0, 4)) {
- roots[i].children.push(subs[j])
- }
- }
- }
- }
- return roots
- },
- /**
- * 合并远程路由到本地路由
- * @param: subList [Array] 远程路由列表
- * @param: routes [Array] 本地路由列表
- * */
- mergeRoutes (subs) {
- if (subs) {
- for (let i = 0; i < subs.length; i++) {
- let temp = {
- path: subs[i].actUrl,
- name: subs[i].actUrl,
- component: (resolve) => require([`@/components/${subs[i].component}.vue`], resolve),
- meta: {
- type: subs[i].type,
- code: subs[i].code,
- title: subs[i].name,
- permissionList: subs[i].permissionList
- }
- }
- routes[1].children.push(temp)
- }
- }
- return routes
- }
- }
至此我们已经将权限路由成功配置进本地路由了, 我的系统登录进入如下
后续优化
1, 菜单列表的显示以及二级导航切换:
- <template>
- <div class="mainMenu">
- <el-menu
- class="menubar"
- mode="horizontal"
- :default-active="activeCode"
- background-color="#545c64"
- text-color="#fff"
- active-text-color="#ffd04b">
- <el-menu-item :index="item.code | splitCode" v-for="item in menuList" :key="item.code" @click="switchSubMenu(item)" v-if="item.code !=='0008'">
- <i :class="`iconfont icon-${item.imgUrl}`"></i>
- <span slot="title">{{item.name}}</span>
- </el-menu-item>
- </el-menu>
- </div>
- </template>
- <script type="text/ecmascript-6">
- import {mapState, mapMutations} from 'vuex'
- export default {
- name: 'menu',
- data () {
- return {
- msg: 'Welcome to Your vue.js App'
- }
- },
- computed: {
- ...mapState(['menuList']),
- activeCode () {
- // 通过 code 保证在切换字路由的情况下一级路由也是高亮显示
- return this.$route.meta.code.substring(0, 4)
- }
- },
- methods: {
- ...mapMutations(['saveRes']),
- // 切换二级路由
- switchSubMenu (route) {
- console.info('路由:', route)
- if (route.actUrl !== 'index') {
- // 用 currentSubMenu 控制二级路由数据
- this.saveRes({label: 'currentSubMenu', value: route.children})
- this.$router.push(`/layout/${route.children[0].actUrl}`)
- } else {
- // 不存在二级路由隐藏二级
- this.saveRes({label: 'currentSubMenu', value: ''})
- this.$router.push(`/layout/${route.actUrl}`)
- }
- }
- },
- filters: {
- splitCode (code) {
- return code.substring(0, 4)
- }
- }
- }
- </script>
2, 防止刷新路由丢失; 由于在刷新的时候单页应用会重新初始化, 这时候所有配置的路由都会丢失, 一朝回到解放前, 只有本地配置的路由能够跳转. 这时候我们可以在 app.vue(ps: 不论在哪里进行刷新, app.vue 都会执行) 中执行如下代码:
- <script>
- import {decrypt} from '@/libs/AES'
- import handleMenu from '@/router/handleMenu'
- export default {
- name: 'app',
- created () {
- // 当 this.$router.options.routes 的长度为 1, 且本地缓存存在菜单列表的时候才重新配置路由
- if (this.$router.options.routes.length <= 1 && sessionStorage.getItem('subList')) {
- let subList = JSON.parse(decrypt(sessionStorage.getItem('subList')))
- let routes = handleMenu.mergeRoutes(subList)
- this.$router.addRoutes(routes)
- // this.$router 不是响应式的, 所以手动将路由元注入路由对象
- this.$router.options.routes.push(routes)
- }
- }
- }
- </script>
这样即使刷新, 也会重新配置路由了.
3, 关于页面按钮级别控制, 可以自定义一个指令, 去做这件事情. 因为我们已经权限列表放入了相应路由的 meta 对象中, 所以我们可以很方便的在每个页面回去到当前用户在当前页面所拥有的权限
参考官方文档自定义指令 https://cn.vuejs.org/v2/guide/custom-directive.html
结语
打完收工, 得亏 vue-router2 中添加了 addRoutes 的方法, 不然
来源: http://www.jb51.net/article/140171.htm