Mapa de ideas de implementación
1. Configuración de enrutamiento dinámico único
const clientRouter: RouteConfig = {
path: '/client',
component: Layout,
redirect: 'noredirect',
name: 'client',
meta: {
title: 'client',
icon: 'patient',
permission: "Pages_Client"
},
children: [
{
path: 'index',
component: () => import('@/views/client/index.vue'),
name: 'clientIndex',
meta: {
title: 'clientList',
icon: 'patient',
noCache: false,
}
},
]
}
2. Exportar todas las rutas dinámicas
import questionnaireRouter from './modules/questionnaireRouter'
import systemRouter from './modules/systemRouter'
import surveyRouter from './modules/surveyRouter'
import resourceRouter from './modules/resourceRouter'
import notificationRouter from './modules/notificationRouter'
import clientRouter from './modules/clientRouter'
import myRouter from './modules/myRouter'
import clientTrackingRouter from './modules/clientTrackingRouter'
import employeeRouter from './modules/employeeRouter'
import workflowRouter from './modules/workflowRouter'
import healthRouter from './modules/healthRouter'
/**
动态
*/
export const asyncRoutes: RouteConfig[] = [
systemRouter,
clientRouter,
employeeRouter,
myRouter,
questionnaireRouter,
surveyRouter,
resourceRouter,
notificationRouter,
clientTrackingRouter,
workflowRouter,
healthRouter,
{
path: '*',
redirect: '/404',
meta: { hidden: true }
},
]
3. Archivo permiso.js de control de permisos de enrutamiento
import router from './router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { Message } from 'element-ui'
import { Route } from 'vue-router'
import { UserModule } from '@/store/modules/user'
import { PermissionModule } from '@/store/modules/permission'
import i18n from '@/lang'
import settings from './settings'
import { tryReconnect } from './messageHandler'
NProgress.configure({ showSpinner: false })
const whiteList = ['/login', '/auth-redirect']
const getPageTitle = (key: string) => {
const hasKey = i18n.te(`route.${key}`)
if (hasKey) {
const pageName = i18n.t(`route.${key}`)
return `${pageName} - ${settings.title}`
}
return `${settings.title}`
}
router.beforeEach(async (to: Route, _: Route, next: any) => {
NProgress.start()
// 判断用户是否已经登录
if (UserModule.token) {
if (to.path === '/login') {
// 如果已登录,则重定向到主页
next({ path: '/' })
NProgress.done()
} else {
// 检查用户是否已获取相应的权限角色
if (UserModule.permissions.length === 0) {
try {
await UserModule.GetUserInfo()
const permissions = UserModule.permissions
// 基于角色权限生成可访问路由图
PermissionModule.GenerateRoutes(permissions)
// 动态添加可访问的路由
PermissionModule.dynamicRoutes.forEach(route => {
router.addRoute(route)
})
tryReconnect()
// 避免导航留下历史记录
next({ ...to, replace: true })
} catch (err) {
// Remove token and redirect to login page
UserModule.ResetToken()
Message.error(`${err}` || 'Has Error')
next(`/login?redirect=${to.path}`)
NProgress.done()
}
} else {
next()
}
}
} else {
// 没有令牌
if (whiteList.indexOf(to.path) !== -1) {
// 在白名单,直接导航
next()
} else {
// 其他没有访问权限的页面被重定向到登录页面。
next(`/login?redirect=${to.path}`)
NProgress.done()
}
}
})
router.afterEach((to: Route) => {
NProgress.done()
document.title = getPageTitle(to.meta.title)
})
4. Módulo de procesamiento de enrutamiento de permisos de Vuex
import { VuexModule, Module, Mutation, Action, getModule } from 'vuex-module-decorators'
import store from '@/store'
import { constantRoutes, asyncRoutes } from '@/router'
//判断当前条目的permission列表里是否包含当前登录用户所具有的权限
//只要包含一个,则返回true
const hasPermission = (permission: string[], route: any) => {
if (route.meta && route.meta.permission) {
return permission.some(c => route.meta.permission == c)
} else {
return true
}
}
export const filterAsyncRoutes = (routes: any[], permission: string[]) => {
const res: any[] = []
routes.forEach(route => {
const r = { ...route }
if (hasPermission(permission, r)) {
if (r.children) {
//递归判断子列表的权限
r.children = filterAsyncRoutes(r.children, permission)
}
res.push(r)
}
})
return res
}
export interface IPermissionState {
routes: any[]
dynamicRoutes: any[]
}
@Module({ dynamic: true, store, name: 'permission' })
class Permission extends VuexModule implements IPermissionState {
public routes: any[] = []
public dynamicRoutes: any[] = []
@Mutation
private SET_ROUTES(routes: any[]) {
this.routes = constantRoutes.concat(routes)
this.dynamicRoutes = routes
}
@Action
public GenerateRoutes(permission: string[]) {
let accessedRoutes
// 包含超级管理者就不需要判断,直接显示
if (permission.includes('MK_SUPER_ADMIN')) {
accessedRoutes = asyncRoutes
} else {
accessedRoutes = filterAsyncRoutes(asyncRoutes, permission)
}
this.SET_ROUTES(accessedRoutes)
}
}
export const PermissionModule = getModule(Permission)