blackteay/vue-antd-admin
1
0
Fork 0
mirror of https://github.com/iczer/vue-antd-admin synced 2025-04-25 19:25:23 +08:00
Code Issues Projects Releases Wiki Activity

路由注册map改为function返回防止内容篡改; 异步路由时自动将/重定向到第一个子路由作为首页; 增加initRouter方法并调整login成功时路由加载; 当路由缓存意外被清理时自动重新加载

Browse Source
This commit is contained in:
huangxianjun 2021-03-19 12:10:29 +08:00
parent 438347a010
commit 14f9b9720d
3 changed files with 197 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/pages/login/Login.vue
View File

@ -75,9 +75,9 @@
<script> <script>
import CommonLayout from '@/layouts/CommonLayout' import CommonLayout from '@/layouts/CommonLayout'
import {login, getRoutesConfig} from '@/services/user' import {login, logout} from '@/services/user'
import {setAuthorization} from '@/utils/request' import {setAuthorization} from '@/utils/request'
import {loadRoutes} from '@/utils/routerUtil' import {initRoutes} from '@/utils/routerUtil'
import {mapMutations} from 'vuex' import {mapMutations} from 'vuex'
export default { export default {
@ -104,6 +104,7 @@ export default {
this.logging = true this.logging = true
const name = this.form.getFieldValue('name') const name = this.form.getFieldValue('name')
const password = this.form.getFieldValue('password') const password = this.form.getFieldValue('password')
logout()
login(name, password).then(this.afterLogin) login(name, password).then(this.afterLogin)
} }
}) })
@ -118,10 +119,8 @@ export default {
this.setRoles(roles) this.setRoles(roles)
setAuthorization({token: loginRes.data.token, expireAt: new Date(loginRes.data.expireAt)}) setAuthorization({token: loginRes.data.token, expireAt: new Date(loginRes.data.expireAt)})
// 获取路由配置 // 获取路由配置
getRoutesConfig().then(result => { initRoutes(() => {
const routesConfig = result.data.data this.$router.push('/')
loadRoutes(routesConfig)
this.$router.push('/dashboard/workplace')
this.$message.success(loginRes.message, 3) this.$message.success(loginRes.message, 3)
}) })
} else { } else {

291
src/router/async/router.map.js
View File

@ -5,150 +5,155 @@ const view = {
page: () => import('@/layouts/PageView') page: () => import('@/layouts/PageView')
} }
// 路由组件注册 export const initRouterMap = () => {
const routerMap = { return {
login: { login: {
authority: '*', authority: '*',
path: '/login', path: '/login',
component: () => import('@/pages/login') component: () => import('@/pages/login')
}, },
root: { root: {
path: '/', path: '/',
name: '首页', name: '首页',
redirect: '/login', redirect: '/login',
component: view.tabs component: view.tabs
}, },
dashboard: { dashboard: {
name: 'Dashboard', name: 'Dashboard',
component: view.blank component: view.blank
}, },
workplace: { workplace: {
name: '工作台', name: '工作台',
component: () => import('@/pages/dashboard/workplace') component: () => import('@/pages/dashboard/workplace')
}, },
analysis: { analysis: {
name: '分析页', name: '分析页',
component: () => import('@/pages/dashboard/analysis') component: () => import('@/pages/dashboard/analysis')
}, },
form: { form: {
name: '表单页', name: '表单页',
icon: 'form', icon: 'form',
component: view.page component: view.page
}, },
basicForm: { basicForm: {
path: 'basic', path: 'basic',
name: '基础表单', name: '基础表单',
component: () => import('@/pages/form/basic') component: () => import('@/pages/form/basic')
}, },
stepForm: { stepForm: {
path: 'step', path: 'step',
name: '分步表单', name: '分步表单',
component: () => import('@/pages/form/step') component: () => import('@/pages/form/step')
}, },
advanceForm: { advanceForm: {
path: 'advance', path: 'advance',
name: '高级表单', name: '高级表单',
component: () => import('@/pages/form/advance') component: () => import('@/pages/form/advance')
}, },
list: { list: {
name: '列表页', name: '列表页',
icon: 'table', icon: 'table',
component: view.page component: view.page
}, },
queryList: { queryList: {
path: 'query', path: 'query',
name: '查询表格', name: '查询表格',
component: () => import('@/pages/list/QueryList') component: () => import('@/pages/list/QueryList')
}, },
primaryList: { primaryList: {
path: 'primary', path: 'primary',
name: '标准列表', name: '标准列表',
component: () => import('@/pages/list/StandardList') component: () => import('@/pages/list/StandardList')
}, },
cardList: { cardList: {
path: 'card', path: 'card',
name: '卡片列表', name: '卡片列表',
component: () => import('@/pages/list/CardList') component: () => import('@/pages/list/CardList')
}, },
searchList: { searchList: {
path: 'search', path: 'search',
name: '搜索列表', name: '搜索列表',
component: () => import('@/pages/list/search/SearchLayout') component: () => import('@/pages/list/search/SearchLayout')
}, },
article: { article: {
name: '文章', name: '文章',
component: () => import('@/pages/list/search/ArticleList') component: () => import('@/pages/list/search/ArticleList')
}, },
application: { application: {
name: '应用', name: '应用',
component: () => import('@/pages/list/search/ApplicationList') component: () => import('@/pages/list/search/ApplicationList')
}, },
project: { project: {
name: '项目', name: '项目',
component: () => import('@/pages/list/search/ProjectList') component: () => import('@/pages/list/search/ProjectList')
}, },
details: { details: {
name: '详情页', name: '详情页',
icon: 'profile', icon: 'profile',
component: view.blank component: view.blank
}, },
basicDetails: { basicDetails: {
path: 'basic', path: 'basic',
name: '基础详情页', name: '基础详情页',
component: () => import('@/pages/detail/BasicDetail') component: () => import('@/pages/detail/BasicDetail')
}, },
advanceDetails: { advanceDetails: {
path: 'advance', path: 'advance',
name: '高级详情页', name: '高级详情页',
component: () => import('@/pages/detail/AdvancedDetail') component: () => import('@/pages/detail/AdvancedDetail')
}, },
result: { result: {
name: '结果页', name: '结果页',
icon: 'check-circle-o', icon: 'check-circle-o',
component: view.page component: view.page
}, },
success: { success: {
name: '成功', name: '成功',
component: () => import('@/pages/result/Success') component: () => import('@/pages/result/Success')
}, },
error: { error: {
name: '失败', name: '失败',
component: () => import('@/pages/result/Error') component: () => import('@/pages/result/Error')
}, },
exception: { exception: {
name: '异常页', name: '异常页',
icon: 'warning', icon: 'warning',
component: view.blank component: view.blank
}, },
exp403: { exp403: {
authority: '*', authority: '*',
name: 'exp403', name: 'exp403',
path: '403', path: '403',
component: () => import('@/pages/exception/403') component: () => import('@/pages/exception/403')
}, },
exp404: { exp404: {
name: 'exp404', name: 'exp404',
path: '404', path: '404',
component: () => import('@/pages/exception/404') component: () => import('@/pages/exception/404')
}, },
exp500: { exp500: {
name: 'exp500', name: 'exp500',
path: '500', path: '500',
component: () => import('@/pages/exception/500') component: () => import('@/pages/exception/500')
}, },
components: { components: {
name: '小组件', name: '小组件',
icon: 'appstore-o', icon: 'appstore-o',
component: view.page component: view.page
}, },
taskCard: { taskCard: {
name: '任务卡片', name: '任务卡片',
component: () => import('@/pages/components/TaskCard') component: () => import('@/pages/components/TaskCard')
}, },
palette: { palette: {
name: '颜色复选框', name: '颜色复选框',
component: () => import('@/pages/components/Palette') component: () => import('@/pages/components/Palette')
}
} }
} }
// 路由组件注册
const routerMap = initRouterMap()
export default routerMap export default routerMap

50
src/utils/routerUtil.js
View File

@ -1,8 +1,10 @@
import routerMap from '@/router/async/router.map' import {initRouterMap} from '@/router/async/router.map'
import {mergeI18nFromRoutes} from '@/utils/i18n' import {mergeI18nFromRoutes} from '@/utils/i18n'
import Router from 'vue-router' import Router from 'vue-router'
import deepMerge from 'deepmerge' import deepMerge from 'deepmerge'
import basicOptions from '@/router/async/config.async' import basicOptions from '@/router/async/config.async'
import {getRoutesConfig} from '@/services/user'
import {checkAuthorization} from '@/utils/request'
//应用配置 //应用配置
let appOptions = { let appOptions = {
@ -67,6 +69,24 @@ function parseRoutes(routesConfig, routerMap) {
return routes return routes
} }
/**
* 初始化路由
* @param func function 回调方法
*/
function initRoutes(func) {
if (!checkAuthorization()) {
return
}
getRoutesConfig().then(result => {
if (result.data.data && result.data.data.length > 0) {
loadRoutes(result.data.data)
if (func){
func(result)
}
}
})
}
/** /**
* 加载路由 * 加载路由
* @param routesConfig {RouteConfig[]} 路由配置 * @param routesConfig {RouteConfig[]} 路由配置
@ -87,17 +107,35 @@ function loadRoutes(routesConfig) {
// 应用配置 // 应用配置
const {router, store, i18n} = appOptions const {router, store, i18n} = appOptions
// 如果 routesConfig 有值，则更新到本地，否则从本地获取 // 如果 routesConfig 不存在则重新加载
if (!routesConfig || routesConfig.length <= 0) {
routesConfig = store.getters['account/routesConfig']
if (!routesConfig || routesConfig.length <= 0){
initRoutes()
}
}
// 如果 routesConfig 有值，则更新到本地
if (routesConfig) { if (routesConfig) {
store.commit('account/setRoutesConfig', routesConfig) store.commit('account/setRoutesConfig', routesConfig)
} else {
routesConfig = store.getters['account/routesConfig']
} }
// 如果开启了异步路由，则加载异步路由配置 // 如果开启了异步路由，则加载异步路由配置
const asyncRoutes = store.state.setting.asyncRoutes const asyncRoutes = store.state.setting.asyncRoutes
if (asyncRoutes) { if (asyncRoutes) {
if (routesConfig && routesConfig.length > 0) { if (routesConfig && routesConfig.length > 0) {
const routes = parseRoutes(routesConfig, routerMap) const routes = parseRoutes(routesConfig, initRouterMap())
// 解决动态路由初始化时找不到首页
if (routes && routes.length > 0) {
const getFirstChild = (routes) => {
const route = routes[0]
let path = route.path
if (!route.children || route.children.length === 0) {
return path
}
return !(path) || path === '/' ? '/' + getFirstChild(route.children) : path + '/'+ getFirstChild(route.children)
}
const redirect = getFirstChild(routes)
routes[0].redirect = redirect
}
const finalRoutes = mergeRoutes(basicOptions.routes, routes) const finalRoutes = mergeRoutes(basicOptions.routes, routes)
formatRoutes(finalRoutes) formatRoutes(finalRoutes)
router.options = {...router.options, routes: finalRoutes} router.options = {...router.options, routes: finalRoutes}
@ -248,4 +286,4 @@ function loadGuards(guards, options) {
}) })
} }
export {parseRoutes, loadRoutes, formatAuthority, getI18nKey, loadGuards, deepMergeRoutes, formatRoutes, setAppOptions} export {parseRoutes, loadRoutes, initRoutes, formatAuthority, getI18nKey, loadGuards, deepMergeRoutes, formatRoutes, setAppOptions}