iview admin 调用ajax,基于iview-admin实现动态路由的示例代码

基于iview-admin实现动态路由的示例代码

发布时间：2020-09-19 00:23:02

来源：脚本之家

阅读：110

作者：差点笨死

iview-admin是一个基于vue和iview组件库实现的管理后台前端，本文基于iview-admin最新版本，实现基于权限的动态路由加载。

本文代码可参见：https://github.com/MayBeWrong/iview-admin-dynamic-router

背景：

动态路由：vue的路由，可通过new Router传入路由数组定义实现，也可以通过router.addRoutes实现。通过router.addRoutes动态传入路由定义的方式，称之为动态路由。路由数据可以全部保存在后台数据库中，也可以将路由配置在前端，后端返回给前端路由权限信息，然后匹配过滤，进行加载。本文就这两种方式分别进行介绍，并且给出实现参考。

目标：

基于iview-admin最新代码，实现两种不同的路由动态加载方式：

路由(导航菜单)数据全部存储在后台

路由数据配置在前端，后台只存储权限信息

注意：本文通过Mock模拟后端接口

方式1：路由(导航菜单)数据全部存储在后台

定义路由数据结构体,在文件中：src/mock/data.js

export const routersData = [{

path: '/pet',//访问路径

name: 'Pet',//路由的名字，这个与i18n有关，需要唯一

meta: {

title: '宠物',//标题

hideInMenu: false,//是否在左侧导航菜单隐藏

icon: 'logo-freebsd-devil'//图标

},

component: 'components/main',//组件文件路径，不需要Import

children: [{//嵌套路由

path: 'cat',

name: 'Cat',

meta: {

title: '猫咪',

hideInMenu: false,

icon: 'ios-cloudy-night'

},

component: 'view/pet/cat/Cat.vue'

}, {

path: 'dog',

name: 'Dog',

meta: {

hideInMenu: false,

title: '狗娃',

icon: 'ios-color-filter'

},

component: 'view/pet/dog/Dog.vue'

}, {

path: 'pig',

name: 'Pig',

meta: {

hideInMenu: false,

title: '猪啊',

icon: 'ios-contact'

},

component: 'view/pet/pig/Pig.vue',

children: [

{

path: 'female',

name: 'Female',

meta: {

hideInMenu: false,

title: '母猪',

icon: 'ios-contact'

},

component: 'view/pet/pig/Pig.vue',

},

{

path: 'male',

name: 'Male',

meta: {

hideInMenu: false,

title: '公猪',

icon: 'ios-contact'

},

component: 'view/pet/pig/Pig.vue',

}

]

}]}]

暴露ajax调用接口:src/mock/index.js，中增加：

Mock.mock(/\/sys\/routers/, routersData)

实现一个ajax调用：src/api/routers.js中增加：

export const getRouterReq = (access) => {

return axios.request({

url: '/sys/routers',

params: {

access

},

method: 'get'

})}

1、在store中定义动态路由相关逻辑，修改：src/store/module/app.js

引入ajax请求：

import {getRouterReq} from '@/api/routers'

定义两个state,如下

state: {

.....

routers: [],//拿到的路由数据

hasGetRouter: false//是否已经拿过路由数据

},

同步增加mutations：

mutations：{

......

//设置路由数据

setRouters(state, routers) {

state.routers = routers

},

//设置是否已经拿过路由

setHasGetRouter(state, status) {

state.hasGetRouter = status

}......}

增加一个action：

action:{

........

getRouters({commit}) {

return new Promise((resolve, reject) => {

try {

getRouterReq().then(res => {

let routers = backendMenusToRouters(res.data)

commit('setRouters', routers)

commit('setHasGetRouter', true)

resolve(routers)

}).catch(err => {

reject(err)

})

} catch (error) {

reject(error)

}

})

},

........

}

此处用到了一个函数：backendMenusToRouters，这个函数定义在src/libs/util.js中，用来对后端返回的路由数据递归处理，行程vue的路由。

export const backendMenusToRouters = (menus) => {

let routers = []

forEach(menus, (menu) => {

// 将后端数据转换成路由数据

let route = backendMenuToRoute(menu)

// 如果后端数据有下级，则递归处理下级

if (menu.children && menu.children.length !== 0) {

route.children = backendMenusToRouters(menu.children)

}

routers.push(route)

})

return routers

}

修改src/router/index.js，增加动态路由加入逻辑，主要方法：

const initRouters = (store) => {

//这个人登录了已经

if (store.state.user.hasGetInfo) {

//路由加载过了

if (store.state.app.hasGetRouter && store.state.app.routers && store.state.app.routers.length > 0) {

console.log("已经加载过了路由")

} else {

//加载路由

console.log("开始加载路由权限...")

store.dispatch('getUserMenus').then(routers => {

//此处routers已经是按照权限过滤后的路由了，没权限的，不加入路由，无法访问

//路由重置一下把404放最后

const newRouter = new Router({

routes,

mode: config.routerModel

})

router.matcher = newRouter.matcher;

//把404加最后面，如果用router.push({name:'xxxx'})这种的话，404页面可能空白，用path:'/aa/bb'

router.addRoutes(routers.concat([{

path: '*',

name: 'error_404',

meta: {

hideInMenu: true

},

component: () => import(/* webpackChunkName: "404" */'@/view/error-page/404.vue')

}]))

}).finally(() => {

})

}

}}

每次路由加载之前，都会判断是否已经初始化过系统路由，如果没有，则初始化。

至此，动态路由基本实现。文章可能有遗漏和不足,欢迎探讨。第二种实现方式

具体实现，请参见： https://github.com/MayBeWrong/iview-admin-dynamic-router

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持亿速云。