关于前端:vue-项目路由权限管理实现

38次阅读

共计 8998 个字符,预计需要花费 23 分钟才能阅读完成。

我的项目基于 vue-element-admin 根底之上进行开发,感激 花裤衩 以及为此我的项目做出奉献的大佬 [社会社会]!

思路

路由数据由后端管制,前端调用接口返回数据;前端拿到数据处理成可应用的路由构造,而后渲染到页面。

  1. 路由数据从哪来,路由数据不能在后端写死,那样每次增删都会很麻烦,所以须要有专门的零碎去保护,这样能够不便的管制路由的增删;
  2. 一个专门的零碎只用来保护一个后盾管理系统有点大材小用,所以这个专门的零碎须要能够治理多个利用及对应的路由数据;
  3. 用户登录后盾管理系统会有本人独自的路由数据,这样才能够不同的人有不同的权限,所以对用户的治理划分了角色,不同的角色能够调配不同的路由权限,不同的角色能够绑定相应的用户,这样不同角色下的用户就能够调配不同的路由权限
  4. 用户登录后盾管理系统之后会去申请本人的路由数据,后端依据用户的账号绑定的角色返回给前端对应的路由数据
  5. 前端拿到数据处理成可应用的路由构造,而后渲染到页面

路由数据结构

为了能提供更多的性能,后端返回的数据结构是在原来菜单构造根底之上有所改变的。

原路由数据结构:

{
  path: '/example',
  component: Layout,
  redirect: '/example/list',
  name: 'Example',
  meta: {
    title: 'Example',
    icon: 'el-icon-s-help'
  },
  children: [
    {
      path: 'create',
      component: () => import('@/views/example/create'),
      name: 'CreateArticle',
      meta: {title: 'Create Article', icon: 'edit'}
    },
    {path: 'edit/:id(\\d+)',
      component: () => import('@/views/example/edit'),
      name: 'EditArticle',
      meta: {title: 'Edit Article', noCache: true, activeMenu: '/example/list'},
      hidden: true
    }
  ]
}

后端返回数据结构:

{
  "id": "","type": 0, // 用来标注以后层级的类型 0:头部菜单;1:侧边目录;2:侧边菜单;3:页面按钮"name":" 商家治理 ", // 绝对于 meta 外面的 title"icon":"", // 绝对于 meta 外面的 icon
  "component": "", // 寄存组件关键字,path、name 应用此字段"permissionFlag":"storeManagement:head", // 权限标识"sort": 1,"children": [
    {
      "id": "","type": 1,"name":" 商家治理 ","icon":"",
      "component": "","permissionFlag":"storeManage:menu","sort": 1,"children": [
        {
          "id": "","type": 2,"name":" 商家治理 ","icon":"",
          "component": "storeManage",
          "permissionFlag": "storeManage:page",
          "sort": 1,
          "children": [
            {
              "id": "","type": 3,"name":" 新增 ","icon":"",
              "component": "storeManageDetail",
              "permissionFlag": "storeManageDetail:add",
              "sort": null,
              "children": null
            }
          ]
        }
      ]
    }
  ]
}

路由数据采纳多级嵌套构造,根本能够满足需要。

解决路由数据

拿到接口返回的数据之后还不能间接应用,须要通过一些解决。

合并开发的长期路由数据

在本地的开发,新增页面时,为了不便开发,获取到后端返回的数据之后用了一个办法来合并数据:

let temporaryMenuArray = [] // 长期路由数组
function getNewPermissionTree(temporaryMenuArray, userPermissionMenu) {if (temporaryMenuArray && temporaryMenuArray.length > 0) {temporaryMenuArray.forEach((tempItem) => {if (!userPermissionMenu.some((it) => it.permissionFlag === tempItem.permissionFlag)) {userPermissionMenu.push(tempItem)
      } else {userPermissionMenu = userPermissionMenu.map((item) => {if (item.permissionFlag === tempItem.permissionFlag) {item.children = getNewPermissionTree(tempItem.children || [], item.children || [])
          }
          return item
        })
      }
    })
  }
  return userPermissionMenu
}

export const setTemporaryMenu = function (userPermissionMenu) {return getNewPermissionTree(temporaryMenuArray, userPermissionMenu)
}

temporaryMenuArray 长期路由数组的构造须要跟后端返回的数据结构统一。

temporaryMenuArray = [
  {
    "id": "","type": 0, // 用来标注以后层级的类型"name":" 商家治理 ", // 绝对于 meta 外面的 title"icon":"", // 绝对于 meta 外面的 icon
    "component": "", // 寄存组件关键字,path、name 应用此字段"permissionFlag":"storeManagement:head", // 权限标识"sort": 1,"children": [
      {
        "id": "","type": 1,"name":" 商家治理 ","icon":"",
        "component": "","permissionFlag":"storeManage:menu","sort": 1,"children": [
          {
            "id": "","type": 2,"name":" 商家治理 ","icon":"",
            "component": "storeManage",
            "permissionFlag": "storeManage:page",
            "sort": 1,
            "children": [
+ --          {
+ --            "id": "",
+ --            "type": 3,
+ --            "name": "查看",
+ --            "icon": "",
+ --            "component": "storeManageDetail",
+ --            "permissionFlag": "storeManageDetail:view",
+ --            "sort": null,
+ --            "children": null
+ --          }
            ]
          }
        ]
      },
+ --  {
+ --    "id": "",
+ --    "type": 1,
+ --    "name": "商品治理",
+ --    "icon": "",
+ --    "component": "",
+ --    "permissionFlag": "goodsManage:menu",
+ --    "sort": 1,
+ --    "children": [
+ --      {
+ --        "id": "",
+ --        "type": 2,
+ --        "name": "商品治理",
+ --        "icon": "",
+ --        "component": "goodsManage",
+ --        "permissionFlag": "goodsManage:page",
+ --        "sort": 1,
+ --        "children": [
+ --          {
+ --            "id": "",
+ --            "type": 3,
+ --            "name": "新增",
+ --            "icon": "",
+ --            "component": "goodsManageDetail",
+ --            "permissionFlag": "goodsManageDetail:add",
+ --            "sort": null,
+ --            "children": null
+ --          }
+ --        ]
+ --      }
+ --    ]
+ --  }
    ]
  }
]

+ -- 局部为为新增数据。

应用 setTemporaryMenu:

import {setTemporaryMenu} from '@/utils/set-temporary-menu'

// userPermissionMenu 为从接口获取权限菜单数据
// 把接口返回的菜单数据跟长期设置的菜单数据合并
userPermissionMenu = setTemporaryMenu(userPermissionMenu)

合并完长期的路由之后就开始进行路由的解决了。

解决路由模块

从下面后端返回的数据结构中能够看出,曾经和须要解决成的路由很像了,但还是有一些数据没有必要在专门的零碎那里保护,所以须要一些其余数据的解决:

import {routesComponents} from '@/router/routes'

// 用于设置 headerMenu 字段,标注菜单属于哪一个头部一级菜单
let headerMenu = ''
// 用于设置 activeMenu 字段,能够使跳转子级页面时的父级页面高亮
let activeMenu = ''
// 用于设置 parentName 字段,设置子级页面 title
let parentName = ''
// 用于设置 parentPath 字段,设置嵌套目录的门路
let parentPath = ''
// 用于收集路由,避免设置反复路由
let routesComponentTemp = new Set()

/**
 * 收集以后用户能够应用的路由模块
 * @param {*} userPermissionMenu 接口返回的权限菜单数据
 */
function gatherUserCanUseRouteModules(userPermissionMenu) {let routersTemp = []
  userPermissionMenu.forEach((route) => {let routeTemp = {}
    let {children: userRouteChildren = [], name, icon, ...userRouteOtherData } = route
    let permissionFlagArr = route.permissionFlag.split(':')
    let flag = permissionFlagArr[0]
    // !routersTemp.some(it => it.name === flag) 避免 同一个父级下有反复路由
    // !routesComponentTemp.has(route.component) 避免 不同层级下有反复路由
    if (!routersTemp.some((it) => it.name === flag) && !routesComponentTemp.has(route.component)) {if (route.type === 0) {
        headerMenu = route.permissionFlag
        routeTemp.meta = {title: name}
        routeTemp.isHeaderMenu = true
      }
      if (route.type === 1) {
        routeTemp.alwaysShow = false
        // route.type 为 1 时,为目录层级,component 默认为 Layout。没有考录多层目录状况。// 多层目录状况下能够思考在新建菜单时用 权限标识 (permissionFlag) 字段辨别。例如
        // 例如:权限标识 (permissionFlag): "storeManage:menu:2"
        // :2 能够辨别出此时的目录为嵌套目录,则 component 须要设置为 flag(此路由也须要在 @/router/routes 下新建过渡页面)let isNestedMenu = /\d/.test(permissionFlagArr[permissionFlagArr.length - 1])
        parentPath = isNestedMenu ? parentPath : flag
        routeTemp.component = isNestedMenu ? routesComponents[flag] : routesComponents['Layout']
        routeTemp.headerMenu = headerMenu
        routeTemp.meta = {icon: icon, title: name}
        routeTemp.path = isNestedMenu ? flag : `/${flag}`
        let firstPath = isNestedMenu ? `/${parentPath}` : ''routeTemp.redirect = `${firstPath}/${flag}/${userRouteChildren[0].permissionFlag.split(':')[0]}`
        activeMenu = routeTemp.redirect
      }
      if (route.type === 2) {
        routeTemp.path = flag
        routeTemp.component = routesComponents[route.component]
        // route.type 为 2 时,为列表页面 默认 noCache:false 缓存页面
        // 当 权限标识 (permissionFlag) 蕴含 :keepAlive 时 noCache 会被设置为 true 不缓存页面
        let noCache = permissionFlagArr[permissionFlagArr.length - 1] === 'keepAlive' ? true : false
        routeTemp.meta = {title: name, isBack: false, isEdit: false, noCache}
        parentName = name
        routesComponentTemp.add(route.component)
      }
      if (route.type === 3 && route.component) {
        routeTemp.path = flag
        routeTemp.component = routesComponents[route.component]
        // route.type 为 3 时,为按钮跳转页面 默认 noCache:true 不缓存页面
        // 当 权限标识 (permissionFlag) 蕴含 :keepAlive 时 noCache 会被设置为 false 缓存页面
        let noCache = permissionFlagArr[permissionFlagArr.length - 1] === 'keepAlive' ? false : true
        name = ['新建', '新增', '查看', '编辑'].includes(name) ? '详情' : name
        routeTemp.meta = {title: `${parentName} - ${name}`, noCache, activeMenu: activeMenu }
        routeTemp.hidden = true
        routesComponentTemp.add(route.component)
      }
      // 以后层级有子级,则去收集子级
      let userRouteChildrenTemp = []
      if (userRouteChildren && userRouteChildren.length) {userRouteChildrenTemp = gatherUserCanUseRouteModules(userRouteChildren)
      }
      routeTemp = {...userRouteOtherData, ...routeTemp}
      // 当 route.type 为 0、1 时,name 设置为 permissionFlag 避免反复
      routeTemp.name = [0, 1].includes(route.type) ? route.permissionFlag : flag
      if (route.type === 0 || route.type === 1 || (route.type === 3 && route.component)) {routersTemp.push({ ...routeTemp, children: userRouteChildrenTemp})
      } else if (route.type === 2) {
        // 当 route.type 为 2 使其子级跟其平级,不必再嵌套页面
        routersTemp.push(routeTemp, ...userRouteChildrenTemp)
      }
    }
  })
  return routersTemp
}

// 收集以后用户能够应用的路由模块
const userCanUseRouteModules = gatherUserCanUseRouteModules(userPermissionMenu)

routesComponents 为一个手动保护的页面路由文件:

// 写成 ...{} 格局是为了便于辨别

/* Layout */
const Layout = {Layout: () => import('@/layout'),
}

/* 商家治理 storeManagement */
const storeManagement = {
  // 商家治理
  ...{storeManage: () => import('@/views/store/storeManage'),
    storeManageDetail: () => import('@/views/store/storeManageDetail'),
  },
  // 商品治理
  ...{goodsManage: () => import('@/views/goods/goodsManage'),
    goodsManageDetail: () => import('@/views/goods/goodsManageDetail'),
  },
}

export const routesComponents = {
  ...Layout,
  ...storeManagement,
}

失去的 userCanUseRouteModules 构造如下:

[
  {
    "id": "","type": 0,"component":"",
    "path": null,
    "permissionFlag": "storeManagement:head",
    "sort": 1,
    "meta": {"title": "商家治理"},
    "isHeaderMenu": true,
    "name": "storeManagement:head",
    "children": [
      {
        "id": "","type": 1,"component":"",
        "path": "/storeManage",
        "permissionFlag": "storeManage:menu",
        "sort": 1,
        "alwaysShow": false,
        "headerMenu": "storeManagement:head",
        "meta": {"icon": "","title":" 商家治理 "},"redirect":"/storeManage/storeManage","name":"storeManage:menu","children": [
          {
            "id": "","type": 2,"component":"",
            "path": "storeManage",
            "permissionFlag": "storeManage:page",
            "sort": 1,
            "meta": {
              "title": "商家治理",
              "isBack": false,
              "isEdit": false,
              "noCache": false
            },
            "name": "storeManage"
          },
          {
            "id": "","type": 3,"component":"",
            "path": "storeManageDetail",
            "permissionFlag": "storeManageDetail:view",
            "sort": null,
            "meta": {
              "title": "商家治理 - 详情",
              "noCache": true,
              "activeMenu": "/storeManage/storeManage"
            },
            "hidden": true,
            "name": "storeManageDetail",
            "children": []}
        ]
      }
    ]
  }
]

下面数据中的 type 为 2、3 层级的 component 曾经被替换成对应页面的路由模块了。

获取须要增加的路由

失去 userCanUseRouteModules 之后,其中 name 为 storeManagement:head 的那一层数据是供头部菜单应用的,其 children 的数据才是须要增加的路由数据:

import {asyncRoutes} from '@/router'
// 须要增加的的路由
const addRoutes = [...userCanUseRouteModules.reduce((prev, curr) => [...prev, ...curr.children], []), ...asyncRoutes]

此时的 asyncRoutes 只放了默认匹配的路由,这个是须要放在所有路由的最初的:

export const asyncRoutes = [
  // 404 page must be placed at the end !!!
  {path: '*', redirect: '/404', hidden: true},
]

应用 router.addRoutes 增加路由

import router, {resetRouter} from '@/router'

// reset router
resetRouter()

router.addRoutes(addRoutes)

至此对路由的解决完结。

解决路由这一步是放在 router.beforeEach 路由全局前置守卫里的,联合原有的逻辑进行了一些判断解决。

因为路由数据是由后端数据处理失去的,只蕴含和挂载了以后用户能有权限拜访的局部,没有权限拜访的路由就没有被 router.addRoutes 增加,所以并没有在路由守卫里对每次路由的跳转都进行校验。

正文完
 0