vue-element-admin 实现动态路由(从后台查询出菜单列表绑定)
1. 在路由实例中保留基础路由
router/index.js中只需要保留基础路由,其他的都删了
2. 获取用户菜单,并保存到Vuex中
stroe/modules/user.js中,有个getInfo方法查询用户基本信息,返回了用户的菜单列表
// get user info
getInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getInfo(state.token).then(response => {
const { data } = response
if (!data) {
reject('Verification failed, please Login again.')
}
console.log(data)
const menus =
[{
path: '/books',
component: 'Layout',
children: [{
path: 'index',
name: 'AddressBook',
component: 'workbench/addressbook',
meta: { title: '通讯录', icon: 'company' }
}]
},
{
path: '/systool',
component: 'Layout',
redirect: '/systool/coder',
name: 'SysTool',
meta: { title: '实验室', icon: 'example' },
children: [
{
path: 'calendar',
name: 'Calendar',
component: 'workbench/calendar',
meta: { title: '日程', icon: 'table' }
}
]
}]
const { name, avatar, companyName, employeeid } = data
commit('SET_NAME', name)
commit('SET_AVATAR', avatar)
commit('SET_CMPNAME', companyName)
commit('SET_USERID', employeeid)
commit('SET_MENUS', menus)
resolve(data)
}).catch(error => {
reject(error)
})
})
}
user.js
const getters = {
sidebar: state => state.app.sidebar,
device: state => state.app.device,
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
cmpname: state => state.user.cmpname,
userid: state => state.user.userid,
menus: state => state.user.menus
}
export default getters
getter.js
3.动态生成权限路由(核心)
根据环境配置导入组件,在vue中,将菜单路径作为参数,实现路由地址的注入
在 src/router 文件夹下,建立两个文件,各只需添加一行代码, 定义导入方法
src/router/_import_development.js
//开发环境导入组件
module.exports = file => require('@/views' + file + '.vue').default // vue-loader at least v13.0.0+
--------------------------------------------------------------------- src/router/_import_production.js
//生产环境导入组件
module.exports = file => () => import('@/views' + file + '.vue')
A,组件导入 —— _import
//获取组件的方法
const _import = require('./router/_import_' + process.env.NODE_ENV) // ....... //导入路径下的组件
route.component = _import(route.path)
B,在路由钩子中,过滤路由,并生成路由
核心在src目录下的permission.js中,router.beforeEach路由钩子
import router from './router'
import store from './store'
import {
Message
} from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import {
getToken
} from '@/utils/auth' // get token from cookie
import getPageTitle from '@/utils/get-page-title'
import Layout from '@/layout'
const _import = require('./router/_import_' + process.env.NODE_ENV) // 获取组件的方法 NProgress.configure({
showSpinner: false
}) // NProgress Configuration const whiteList = ['/login'] // no redirect whitelist router.beforeEach(async(to, from, next) => {
// start progress bar
NProgress.start() // set page title
document.title = getPageTitle(to.meta.title) // determine whether the user has logged in
const hasToken = getToken() if (hasToken) {
if (to.path === '/login') {
// if is logged in, redirect to the home page
next({
path: '/'
})
NProgress.done()
} else {
const hasGetUserInfo = store.getters.name
if (hasGetUserInfo) {
next()
} else {
try {
// get user info
await store.dispatch('user/getInfo')
if (store.getters.menus.length < 1) {
global.antRouter = []
next()
}
const menus = filterAsyncRouter(store.getters.menus) // 1.过滤路由
router.addRoutes(menus) // 2.动态添加路由
global.antRouter = menus // 3.将路由数据传递给全局变量,做侧边栏菜单渲染工作
next({
...to,
replace: true
}) // hack方法 确保addRoutes已完成 ,set the replace
} catch (error) {
// remove token and go to login page to re-login
await store.dispatch('user/resetToken')
Message.error(error || 'Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}
} else {
/* has no token*/ if (whiteList.indexOf(to.path) !== -1) {
// in the free login whitelist, go directly
next()
} else {
// other pages that do not have permission to access are redirected to the login page.
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
}) router.afterEach(() => {
// finish progress bar
NProgress.done()
}) // 遍历后台传来的路由字符串,转换为组件对象
function filterAsyncRouter(asyncRouterMap) {
const accessedRouters = asyncRouterMap.filter(route => {
if (route.component) {
if (route.component === 'Layout') {
route.component = Layout
} else {
route.component = _import(route.component) // 导入组件
}
}
if (route.children && route.children.length) {
route.children = filterAsyncRouter(route.children)
}
return true
}) return accessedRouters
}
4.最后一步,合并路由
vue-element-admin 实现动态路由(从后台查询出菜单列表绑定)的更多相关文章
- vue管理平台的动态路由(后台传递路由,前端拿到并生成侧边栏)
前端的路由从后台获取,包括权限: 大体步骤包括:路由拦截(钩子函数)---->后台获取路由数据 ----> 保存到本地或vuex中. 在router-->index.js中: rou ...
- 循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合
循序渐进VUE+Element 前端应用开发的系列文章中,前面介绍了系统各个功能的处理实现,本篇随笔从一个主线上介绍前后端开发的整合,让我们从ABP框架后端的查询接口的处理,前端API接口调用的封装, ...
- 在微信框架模块中,基于Vue&Element前端的微信公众号和企业微信的用户绑定
在一个和微信相关的业务管理系统,我们有时候需要和用户的微信账号信息进行绑定,如对公众号.企业微信等账号绑定特定的系统用户,可以进行扫码登录.微信信息发送等操作,用户的绑定主要就是记录公众号用户的ope ...
- Vue | 自定义指令和动态路由实现权限控制
功能概述: 根据后端返回接口,实现路由动态显示 实现按钮(HTML元素)级别权限控制 涉及知识点: 路由守卫 Vuex使用 Vue自定义指令 导航守卫 前端工程采用Github开源项目Vue-elem ...
- Vue.js 中的动态路由
静态路由是不可以传递参数的.需要传递参数得用到动态路由 那么如何将参数作为路由呢? //在参数名前面加上 : ,然后将参数写在路由的 path 内 routes: [ //将页面组件与path指令的路 ...
- vue+element UI以组件递归方式实现多级导航菜单
介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组 ...
- 循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计
在系统模块中的业务列表展示里面,一般我们都会在列表中放置一些查询条件,如果是表字段不多,大多数情况下,放置的条件有十个八个就可以了,如果是字段很多,而这些条件信息也很关键的时候,就可能放置很多条件,但 ...
- vue element Admin - 修改浏览器标签名 + 添加tagView标签 +固定导航头部 + 添加侧边栏Logo
1 .修改浏览器标签名称: 修改浏览器标签名称在文件:\src\settings.js image.png 2 .修改固定头部Header和侧边栏 Logo: image.png 1)侧边栏文 ...
- vue+element项目中动态表格合并
需求:elementui里的table虽然有合并函数(:span-method),单基本都是设置固定值合并.现在有一个树型结构的数据,要求我们将里面的某个list和其他属性一起展开展示,并且list中 ...
随机推荐
- java之hibernate之hibernate查询
这篇主要简单间接 hibernate查询 1.数据库操作中最重要的是查询,Hibernate提供了多种查询方式来帮助程序员快速实现查询功能. 有hql,本地sql查询,Criteria查询,examp ...
- Mars Sample 使用说明
Mars Sample 使用说明 https://github.com/Tencent/mars/wiki/Mars-sample-%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98 ...
- iOS之集成GoogleMap定位、搜索注意事项
简介: 最近花了些时间看了GoogleMap官方文件并集成到国际版app中,网上关于GoogleMap for iOS的讲解相对Android来说少一点,比较有帮助的几乎全是英文文档.下面是我开发过程 ...
- iOS - 崩溃异常处理(1)
https://www.jianshu.com/p/4d32664dcfdb 一.关于崩溃 闪退估计是我们最不想看到的,对于用户而言,马上就能产生一种不悦,对于投资方而言,也会产生对技术实力的不信任感 ...
- 数据仓库模型ETL架构(DWI/DWR/DM)
1.DWI DWI:数据湖.数据砥柱,一般存放在HDFS 数据仓库的基础数据来源,各种杂七杂八的数据 关键点:数据清洗.数据整合.异常处理.增量获取 ETL:E-数据抽取.数据清洁.格式转换,T-生成 ...
- 正则 \num 如:\1, \2 匹配的结果
\num 匹配 num,其中 num 是一个正整数.对所获取的匹配的引用.例如,'(.)\1' 匹配两个连续的相同字符. 例子: 正则:/(a)(b)\1/.此表达式的意思大概是对第一个()匹配结果的 ...
- CSS 滑动门案例
一.什么是滑动门特效 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术.它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强. ...
- WPF弹出进度条
环境:vs2015 ,.net 4.6 源码地址:https://pan.baidu.com/s/1FoujUMst1luomPf0ZfCLUQ 提取码:trzj 说明: 1.进度条是在winFrom ...
- 如何在Win7电脑上增加新磁盘分区?
原文链接: https://www.cnblogs.com/haoxitong/p/9405497.html 我们在重装好系统Win7系统后有时会碰到需要新建磁盘分区的情况,这时我们再重装系统进行磁盘 ...
- golang读写文件之Scan和Fprintf
1. 标准输入输出 os提供了标准输入输出: Stdin = NewFile(uintptr(syscall.Stdin), "/dev/stdin") Stdout = NewF ...