Ant Design Vue Pro 动态路由
Ant Design Vue Pro 动态路由
-
-
-
-
- 1、关闭mock
- 2、修改动态权限功能引用
- 4、修改报错
- 5、修改src/api/login.js
- 6、修改permission.js逻辑
- 7、修改src/store/modules/user.js
- 8、修改generatorDynamicRouter
-
-
-
1、关闭mock
注释掉main.js第16行
// with polyfills
import 'core-js/stable'
import 'regenerator-runtime/runtime'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/'
import i18n from './locales'
import {
VueAxios } from './utils/request'
import ProLayout, {
PageHeaderWrapper } from '@ant-design-vue/pro-layout'
import themePluginConfig from '../config/themePluginConfig'
// mock
// WARNING: `mockjs` NOT SUPPORT `IE` PLEASE DO NOT USE IN `production` ENV.
// import './mock' // 注释掉本行
import bootstrap from './core/bootstrap'
2、修改动态权限功能引用
src/store/index.js,注释掉第8行，放开第11行
import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
// default router permission control
// import permission from './modules/permission' // 注释掉本行
// dynamic router permission control (Experimental)
import permission from './modules/async-router' // 放开本行
import getters from './getters'
4、修改报错
此时会出现如下错误：
ERROR Failed to compile with 2 errors 10:12:09
These dependencies were not found:
* @/utils/permissions in ./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--12-0!./node_modules/_babel-loader@8.2.2@babel-loader/lib!./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js??ref--0-0!./node_modules/_vue-loader@15.9.6@vue-loader/lib??vue-loader-options!./src/views/role/RoleList.vue?vue&type=script&lang=js&
* @/views/account/settings/BaseSetting in ./src/router/generator-routers.js
To install them, you can run: npm install --save @/utils/permissions @/views/account/settings/BaseSetting
1、新建@/utils/permissions.js文件，内容如下：
因为，/src/views/role/RoleList.vue中引用了这个文件的actionToObject函数，但是缺失所以报错。暂时先给补上，后续逻辑自己实现即可。
export function actionToObject (data) {
return data
}
2、./src/router/generator-routers.js文件注释掉第49行
// 'BaseSettings': () => import('@/views/account/settings/BaseSetting'),
5、修改src/api/login.js
# 将url修改为自己项目的URL
const userApi = {
Login: '/lab/portal/login',
Logout: '/lab/portal/logout',
ForgePassword: '/lab/portal/forge-password',
Register: '/lab/portal/register',
twoStepCode: '/lab/portal/2step-code',
SendSms: '/lab/portal/account/sms',
SendSmsErr: '/lab/portal/account/sms_err',
// get my info
UserInfo: '/lab/portal/userInfo',
UserMenu: '/lab/portal/user/nav'
}
6、修改permission.js逻辑
框架原来的逻辑是
1、登录，获取token
2、访问GetInfo方法，拿到用户角色信息
3、访问GenerateRoutes，根据角色信息获取路由信息。
给他精简为两步，1、登录获取token，2、访问getInfo方法拿到用户角色、权限等全部信息
# 改成这样样子
// check login user.roles is null
if (store.getters.roles.length === 0) {
// request login userInfo
store.dispatch('GetInfo').then(res => {
// 动态添加可访问路由表
router.addRoutes(store.getters.addRouters)
// 请求带有 redirect 重定向时，登录自动重定向到该地址
const redirect = decodeURIComponent(from.query.redirect || to.path)
if (to.path === redirect) {
// set the replace: true so the navigation will not leave a history record
next({
...to, replace: true })
} else {
// 跳转到目的路由
next({
path: redirect })
}
})
.catch(() => {
notification.error({
message: '错误',
description: '请求用户信息失败，请重试'
})
// 失败时，获取用户信息失败时，调用登出，来清空历史保留信息
store.dispatch('Logout').then(() => {
next({
path: loginRoutePath, query: {
redirect: to.fullPath } })
})
})
} else {
next()
}
7、修改src/store/modules/user.js
1、import {
generatorDynamicRouter } from '@/router/generator-routers'
2、修改GetInfo函数（可根据自己实际情况进行调整）
GetInfo ({
commit }) {
return new Promise((resolve, reject) => {
getInfo().then(response => {
const result = response.data
if (result.role && result.role > 0) {
commit('SET_ROLES', result.role)
commit('SET_INFO', result)
commit('SET_ROUTERS', generatorDynamicRouter(result.routes))
} else {
reject(new Error('getInfo: roles must be a non-null array !'))
}
commit('SET_NAME', {
name: result.name, welcome: welcome() })
commit('SET_AVATAR', result.avatar)
resolve(response)
}).catch(error => {
reject(error)
})
})
}
8、修改generatorDynamicRouter
/**
* 动态生成菜单
* @param token
* @returns {Promise}
*/
export const generatorDynamicRouter = (jsonRouter) => {
const routers = generator(jsonRouter)// labRouterMap
routers.push(notFoundRouter)
return routers
}
#根据后台传回来的json自行调整具体数据
/**
* 格式化树形结构数据 生成 vue-router 层级路由表
*
* @param routerMap
* @param parent
* @returns {*}
*/
export const generator = (routerMap, parent) => {
return routerMap.map(item => {
// const { title, show, hideChildren, hiddenHeaderContent, target, icon } = item.meta || {}
const currentRouter = {
// 如果路由设置了 path，则作为默认 path，否则 路由地址 动态拼接生成如 /dashboard/workplace
path: item.path || `${
parent && parent.path || ''}/${
item.path}`,
// 路由名称，建议唯一
name: item.name || '',
// 该路由对应页面的 组件 :方案1
// component: constantRouterComponents[item.component || item.key],
// 该路由对应页面的 组件 :方案2 (动态加载)
component: (constantRouterComponents[item.component.data]) || (() => import(`@/views/${
item.component.data}`)),
//注意，这个@后面一定要跟一个views或者其他的字符串，否则编译会检查md文件异常
// meta: 页面标题, 菜单图标, 页面权限(供指令权限用，可去掉)
meta: {
title: item.meta.title,
icon: item.meta.icon || undefined
}
}
// 是否设置了隐藏菜单
if (item.hidden === true) {
currentRouter.hidden = true
}
// 为了防止出现后端返回结果不规范，处理有可能出现拼接出两个 反斜杠
if (!currentRouter.path.startsWith('http')) {
currentRouter.path = currentRouter.path.replace('//', '/')
}
// 重定向
item.redirect && (currentRouter.redirect = item.redirect)
// 是否有子菜单，并递归处理
if (item.children && item.children.length > 0) {
// Recursion
currentRouter.children = generator(item.children, currentRouter)
}
return currentRouter
})
}