vue-element-admin改为从后台获取菜单
一、修改文件\src\router\index.js
文件的asyncRoutes清理为
export const asyncRoutes = [
{ path: '*', redirect: '/404', hidden: true }
]
二、修改src\store\modules\permission.js
增加
复制并注释 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改为从后台获取菜单的更多相关文章
- 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...
- GitHub Vue项目推荐|Vue+Element实现的电商后台管理系统功能丰富
GitHub Vue项目推荐|mall-admin-web是一个电商后台管理系统的前端项目基于Vue+Element实现 主要包括商品管理.订单管理.会员管理.促销管理.运营管理.内容管理.统计报表. ...
- 循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理
在我开发的很多系统里面,包括Winform混合框架.Bootstrap开发框架等系列产品中,我都倾向于动态配置菜单,并管理对应角色的菜单权限和页面权限,实现系统对用户权限的控制,菜单一般包括有名称.图 ...
- vue+element UI递归方式实现多级导航菜单
介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组 ...
- vue element Admin - 修改浏览器标签名 + 添加tagView标签 +固定导航头部 + 添加侧边栏Logo
1 .修改浏览器标签名称: 修改浏览器标签名称在文件:\src\settings.js image.png 2 .修改固定头部Header和侧边栏 Logo: image.png 1)侧边栏文 ...
- vue element admin 关闭eslint校验
vue.config.js里面进行设置 lintOnSave: false, // lintOnSave: process.env.NODE_ENV === 'development',
- vue+element UI 使用select元素动态的从后台获取到
VUE select元素动态的从后台获取到 <el-form-item label="选择店铺"> <el-select v-model="value& ...
- 循序渐进VUE+Element 前端应用开发(17)--- 菜单资源管理
在权限管理系统中,菜单也属于权限控制的一个资源,应该直接应用于角色,和权限功能点一样,属于角色控制的一环.不同角色用户,登录系统后,出现的系统菜单是不同的.在VUE+Element 前端中,我们菜单结 ...
- 循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用
在我们开发BS页面的时候,往往需要了解常规界面组件的使用,小到最普通的单文本输入框.多文本框.下拉列表,以及按钮.图片展示.弹出对话框.表单处理.条码二维码等等,本篇随笔基于普通表格业务的展示录入的场 ...
- 循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理
我们开发的系统,一般可以不用考虑语言国际化的问题,大多数系统一般是给本国人使用的,而且直接使用中文开发界面会更加迅速 一些,不过框架最好能够支持国际化的处理,以便在需要的时候,可以花点时间来实现多语言 ...
随机推荐
- laravel框架之ORM操作
Laravel 支持原生的 SQL 查询.流畅的查询构造器 和 Eloquent ORM 三种查询方式: 流畅的查询构造器(简称DB),它是为创建和运行数据库查询提供的一个接口,支持大部分数据库操作, ...
- Java 设计模式——观察者模式:从优衣库不使用新疆棉事件看系统的动态响应
背景事件:近日,优衣库宣布不再使用新疆棉花,这一举措引发了广泛的社会讨论.消费者的反应和舆论的压力,让优衣库的决策迅速影响了市场和品牌形象.类似的,许多系统也面临着需要根据外部事件或状态的变化,做出即 ...
- 十、Spring Boot集成Spring Security之HTTP请求授权
目录 前言 一.HTTP请求授权工作原理 二.HTTP请求授权配置 1.添加用户权限 2.配置ExceptionTranslationFilter自定义异常处理器 3.HTTP请求授权配置 三.测试接 ...
- 再也不用写请求HttpHelper了,HttpClient帮助你
前言 在C#7.1之后,net推出HttpClient类代替WebRequest, HttpWebRequest, ServicePoint, and WebClient ,先来看下他们在以前的作用 ...
- C#微信公众号开发
C#微信公众号开发 一> 准备 [开发文档] [微信公众号测试接口] 用自己的微信扫码登陆,然后就可以获取就有了appId 和 appsecret. 二>获取access_token 打开 ...
- 【Linux】ps -ef|grep -v grep|awk '{print $2}' 命令详解
前言 在Linux服务器中使用脚本时,经常见到ps -ef|grep xxx|grep -v grep|awk '{print $2}'这一句命令 前半部分的ps -ef|grep命令,相信经常接触L ...
- Redis 中 scan 命令踩坑
原本以为自己对redis命令还蛮熟悉的,各种数据模型各种基于redis的骚操作.但是最近在使用redis的scan的命令式却踩了一个坑,顿时发觉自己原来对redis的游标理解的很有限.所以记录下这个踩 ...
- grpc与http2的关系
https://nullget.sourceforge.io/?q=node/895 grpc与http2的关系 grpc client 发送包到原生的http2 server client收到报错: ...
- Qt/C++编写视频监控系统80-远程回放视频流
一.前言 远程回放NVR或者服务器上的视频文件,一般有三种方式,第一种是调用厂家的SDK,这个功能最全,但是缺点明显就是每个厂家的设备都有自己的SDK,只兼容自家的设备,如果你的软件需要接入多个厂家的 ...
- error LNK2038: 检测到“_MSC_VER”的不匹配项问题
_MSC_VER这个相当于做了宏的检测 _MSC_VER 定义编译器的版本. 一些编译器版本的_MSC_VER值:MS VC++ 14.0 _MSC_VER = 1900 vs2015MS VC++ ...