一、修改文件\src\router\index.js

文件的asyncRoutes清理为

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

二、修改src\store\modules\permission.js

增加

import { getMenu } from '@/api/user'

复制并注释 const actions = {

新的

const actions = {
generateRoutes({ commit }, roles) {
return new Promise(resolve => {
const loadMenuData = []
// 先查询后台并返回左侧菜单数据并把数据添加到路由
getMenu(state.token).then(response => {
let data = response
if (response.code !== 20000) {
alert(JSON.stringify('菜单数据加载异常'))
// throw new Error('菜单数据加载异常')
} else {
data = response.data
Object.assign(loadMenuData, data)
const tempAsyncRoutes = Object.assign([], asyncRoutes)
generaMenu(tempAsyncRoutes, loadMenuData)
let accessedRoutes
if (roles.includes('admin')) {
accessedRoutes = tempAsyncRoutes || []
} else {
accessedRoutes = filterAsyncRoutes(tempAsyncRoutes, roles)
}
commit('SET_ROUTES', accessedRoutes)
resolve(accessedRoutes)
}
}).catch(error => {
console.log(error)
})
})
}
}

vue-element-admin改为从后台获取菜单的更多相关文章

  1. 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理

    在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...

  2. GitHub Vue项目推荐|Vue+Element实现的电商后台管理系统功能丰富

    GitHub Vue项目推荐|mall-admin-web是一个电商后台管理系统的前端项目基于Vue+Element实现 主要包括商品管理.订单管理.会员管理.促销管理.运营管理.内容管理.统计报表. ...

  3. 循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理

    在我开发的很多系统里面,包括Winform混合框架.Bootstrap开发框架等系列产品中,我都倾向于动态配置菜单,并管理对应角色的菜单权限和页面权限,实现系统对用户权限的控制,菜单一般包括有名称.图 ...

  4. vue+element UI递归方式实现多级导航菜单

    介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组 ...

  5. vue element Admin - 修改浏览器标签名 + 添加tagView标签 +固定导航头部 + 添加侧边栏Logo

    1 .修改浏览器标签名称: 修改浏览器标签名称在文件:\src\settings.js   image.png 2 .修改固定头部Header和侧边栏 Logo:   image.png 1)侧边栏文 ...

  6. vue element admin 关闭eslint校验

    vue.config.js里面进行设置 lintOnSave: false, // lintOnSave: process.env.NODE_ENV === 'development',

  7. vue+element UI 使用select元素动态的从后台获取到

    VUE select元素动态的从后台获取到 <el-form-item label="选择店铺"> <el-select v-model="value& ...

  8. 循序渐进VUE+Element 前端应用开发(17)--- 菜单资源管理

    在权限管理系统中,菜单也属于权限控制的一个资源,应该直接应用于角色,和权限功能点一样,属于角色控制的一环.不同角色用户,登录系统后,出现的系统菜单是不同的.在VUE+Element 前端中,我们菜单结 ...

  9. 循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用

    在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...

  10. 循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理

    我们开发的系统,一般可以不用考虑语言国际化的问题,大多数系统一般是给本国人使用的,而且直接使用中文开发界面会更加迅速 一些,不过框架最好能够支持国际化的处理,以便在需要的时候,可以花点时间来实现多语言 ...

随机推荐

  1. nodejs版本管理工具之n

    转载: https://juejin.cn/post/7065534944101007391 Node.js 对于现在的前端开发人员来说是不可或缺的需要掌握的技能,但我们在使用时避免不了会需要切换不同 ...

  2. 你想有多pwn

    第一章 1.1 认识程序 file.ldd 1.2 gdb调试 一.指令 1.start.run 2.断点 设置断点 b mian.b *0x123456 查看断点 info b.i b 让断点失效 ...

  3. 构造SLR语法分析表

    构造SLR语法分析表 方法: 1)构造G'的规范LR(0)项集族 2)根据规则生成动作 3)生成转换 4)设置报错 /** * P157 规范LR(0)项集族 * @param grammar */ ...

  4. Grid 网格布局备忘录

    概述 网格布局(Grid)是最强大的 CSS 布局方案. 它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局. Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个 ...

  5. 【Amadeus原创】HP惠普笔记本重装系统无法引导无法进操作系统的终极解决方法

    F9进入BIOS-先进(Advanced)-安全引导配置- 启用传统支持和禁用安全引导

  6. Microsoft Excel 成为合适的编程语言

    https://thenewstack.io/microsoft-excel-becomes-a-programming-language/ 微软的研究人员相信,由于引入了一项名为 LAMBDA 的新 ...

  7. go语言签发和验证license

    https://www.cnblogs.com/guangdelw/p/18328342 生成非对称密钥 package main import ( "crypto/rand" & ...

  8. docker-安装Oracle11g

    获取镜像 在线   docker pull oracleinanutshell/oracle-xe-11g 离线 tar包下载:链接: https://pan.baidu.com/s/1bRp6mSq ...

  9. win10家庭版升级到专业版密钥

    J7QT3-3GCPG-9GVWT-CH2XR-GMRJM

  10. 龙哥量化:通达信财富币不够怎么办:K线训练营100%胜率,赚财富币

    通达信app的K线训练营中,[K线训练]和[K线对战]都需要花费[5财富币]进行训练,[K线对战]胜利的话可以获得10财富币.注意:是对战,对战,对战,那怎么才能每场都胜呢,哈哈,我们找到历史K线,对 ...