Vue---后台管理系统菜单权限控制

 实现思路图

 

一、单个动态路由配置

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,

      }
    },

  ]
}

二、导出所有动态路由

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 }
  },


]

三、路由权限控制permission.js文件

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)
})

四、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)