使用vue-element-admin框架从后端动态获取菜单功能的实现


Posted in Vue.js onApril 29, 2021

2、详解

​整体思路为:登陆 > 成功后根据用户信息获取菜单 > 根据菜单生成路由信息

2.1、新增asyncRoutes路由

​在vue-router路径src\router\index.js中新增asyncRoutes数组,用来存放后端获取的菜单对应的路由信息。

export const asyncRoutes = [
  { path: '*', redirect: '/404', hidden: true }
]

使用vue-element-admin框架从后端动态获取菜单功能的实现

constantRoutes和asyncRoutes的区别

constantRoutes:不需要动态判断权限的路由,如登录页、404等通用页面。

asyncRoutes:需求动态判断权限并通过addRoutes动态添加的页面

2.2、新建permission.js文件

​在vuex路径src\store\modules\permission.js下新建permission.js文件,该操作为最重要的一步,主要是从后端查询菜单并生成路由。

import { asyncRoutes, constantRoutes } from '@/router'
import { fetchUserMenuList } from '@/api/user'
import Layout from '@/layout'

/**
 * 静态路由懒加载
 * @param view  格式必须为 xxx/xxx 开头不要加斜杠
 * @returns 
 */
export const loadView = (view) => {
  return (resolve) => require([`@/views/${view}.vue`], resolve)
}

/**
 * 把从后端查询的菜单数据拼装成路由格式的数据
 * @param routes
 * @param data 后端返回的菜单数据
 */
export function generaMenu(routes, data) {
  data.forEach(item => {
    const menu = {
      path: item.url, 
      component: item.component === '#' ? Layout : loadView(item.component), 
      hidden: item.status === 0, // 状态为0的隐藏
      redirect: item.redirect,
      children: [],
      name: item.code,
      meta: item.meta
    }

    if (item.children) {
      generaMenu(menu.children, item.children)
    }
    routes.push(menu)
  })
  return routes
}

const state = {
  routes: [],
  addRoutes: []
}

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    // 拼接静态路由和动态路由
    state.routes = constantRoutes.concat(routes)
  }
}

const actions = {
  generateRoutes({ commit }, token) {
    return new Promise(resolve => {
      // 通过token从后端获取用户菜单,并加入全局状态
      fetchUserMenuList(token).then(res => {
        const menuData = Object.assign([], res.data)
        const tempAsyncRoutes = Object.assign([], asyncRoutes)
        const accessedRoutes = generaMenu(tempAsyncRoutes, menuData)

        commit('SET_ROUTES', accessedRoutes)
        resolve(accessedRoutes)
      }).catch(error => {
        console.log(error)
      })
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

2.3、在vuex中注册permission模块

​如果使用的是vue-element-admin请跳过此步,因为它在src\store\index.js中自动注册了src\store\modules下的所有模块。如果你使用的是vue-element-template,可以参考admin,将index.js文件改造一下,也可以手动import一下。

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store

2.4、在getters中增加路由状态

​在vuex路径src\store\getters.js添加menusRoutes状态

menusRoutes: state => state.permission.routes

使用vue-element-admin框架从后端动态获取菜单功能的实现

2.5、修改菜单生成数据来源

​在路径src\layout\components\Sidebar\index.vue修改routes数据来源,原来数据源是路由,改为从vuex中获取。

routes() {
      // return this.$router.options.routes
      return this.$store.getters.menusRoutes
    },

使用vue-element-admin框架从后端动态获取菜单功能的实现

​至此,从后端获取菜单数据到页面展示的逻辑已经完毕,下面开始在登陆后进行调用。

2.6、登陆后获取菜单

​在vuex路径src\store\modules\user.js的login方法中,加入登陆成功通过token获取菜单生成路由逻辑。

// 获取菜单,调用其他文件中actions时必须加 { root: true }
          dispatch('permission/generateRoutes', data, { root: true }).then((accessRoutes) => {
            router.addRoutes(accessRoutes)
          })

使用vue-element-admin框架从后端动态获取菜单功能的实现

2.7、解决刷新后页面空白

​以上内容已经可以实现登陆后展示左侧菜单功能,但是会发现每次刷新页面后,页面都会变空白。这是因为在页面刷新时,会重新加载vue实例,vuex的store中的数据会被重新赋值,导致我们存在vuex中的路由信息被清空。

​在src\permission.js中增加重新获取路由代码。

const accessRoutes = await store.dispatch('permission/generateRoutes', store.getters.token)
          router.addRoutes(accessRoutes)
          next({ ...to, replace: true })

使用vue-element-admin框架从后端动态获取菜单功能的实现

3、总结

​至此根据用户信息动态获取菜单内容已经全部完成。

到此这篇关于使用vue-element-admin框架从后端动态获取菜单的文章就介绍到这了,更多相关vue-element-admin动态获取菜单内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 Vue.js
Vue中引入svg图标的两种方式
Jan 14 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
vue完美实现el-table列宽自适应
May 08 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
vue使用v-model进行跨组件绑定的基本实现方法
关于vue中如何监听数组变化
vue实现简单数据双向绑定
Apr 28 #Vue.js
vue引入Excel表格插件的方法
Apr 28 #Vue.js
原生JS封装vue Tab切换效果
vue项目两种方式实现竖向表格的思路分析
vue首次渲染全过程
You might like
PHP环境搭建最新方法
2006/09/05 PHP
php 前一天或后一天的日期
2008/06/28 PHP
抓取YAHOO股票报价的类
2009/05/15 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
php利用smtp类实现电子邮件发送
2015/10/30 PHP
分享10段PHP常用代码
2015/11/11 PHP
jquery isType() 类型判断代码
2011/02/14 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
2011/09/28 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
Jquery实现的tab效果可以指定默认显示第几页
2013/10/16 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
深入理解js A*寻路算法原理与具体实现过程
2018/12/13 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
python实现多进程通信实例分析
2019/09/01 Python
pytorch 计算Parameter和FLOP的操作
2021/03/04 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
Expedia丹麦:全球领先的旅游网站
2018/03/18 全球购物
技校毕业生自荐信
2014/06/03 职场文书
办公经费申请报告
2015/05/15 职场文书
2015年环境整治工作总结
2015/05/22 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
导游词之包公祠
2019/11/25 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL
Java图书管理系统,课程设计必用(源码+文档)
2021/06/30 Java/Android