vue——利用 router 配置权限管理及 resetRouter

最新推荐文章于 2025-04-06 13:53:10 发布

肖ZE

最新推荐文章于 2025-04-06 13:53:10 发布

阅读量9.4k

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/lucky541788/article/details/102547392

版权

vue 专栏收录该内容

74 篇文章

订阅专栏

本文档介绍了在 Vue 项目中如何利用 `router.js` 进行权限配置，详细阐述了如何在 `modules` 文件夹下的路由文件中设置权限，并提供了权限模拟信息的获取方法。此外，还讲解了在需要时如何执行 `resetRouter` 来重置路由。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

router.js

export const constantRoutes = [
  {
    path: '/redirect',
    component: () => import('@/layout'),
    hidden: true,
    children: [
      {
        path: '/redirect/:path*',
        component: resolve => void require(['@/views/redirect/index'], resolve)
      }
    ]
  },
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/login',
    name: 'Login',
    component: resolve => void require(['@/views/login/index'], resolve),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true // 判断路由入口是否可见的开关
  },
  {
    path: '/home',
    component: () => import('@/layout'),
    hidden: true,
    children: [
      {
        path: '/home',
        name: 'Home',
        component: resolve => void require(['@/views/homepage/index'], resolve),
        meta: {
          title: '主页',
          keepAlive: false, // 该字段表示该页面需要缓存
          isBack: false // 用于判断上一个页面是哪个
        }
      }
    ]
  }
]

/**
 * 异步挂载 modules 下的路由
 * 动态需要根据权限加载的路由表
 */
const modulesFiles = require.context('./modules', true, /\.js$/)

const routesModules = []
// 自动引入modules目录下的所有模块
modulesFiles.keys().reduce((modules, modulePath) => {
  const value = modulesFiles(modulePath)

  routesModules.push(value.default)
}, {})
export const asyncRoutes = routesModules

modules 文件下的 .js 路由

export default {
  path: '/main',
  component: () => import('@/layout'),
  name: 'Main',
  meta: {
    title: '首页管理',
    icon: 'el-icon-s-help'
  },
  children: [
    {
      path: '/main/user',
      name: 'User',
      component: resolve => void require(['@/views/pages/main/user'], resolve),
      meta: {
        title: '用户信息'
      }
    }
  ]
}

配置权限

// 如果是超级管理员,挂载全部路由全部权限
if (isSuperAdmin) {
  // 重定向404的匹配规则需要在整个完整路由定义的最后面，否则刷新会出错。
  const accessedRoutes = [...asyncRoutes, ...notFoundRoutes]
  accessedRoutes.forEach(item => {
    if (item.children) {
      // 超级管理员赋全部权限
      item.children.forEach(elem => {
        elem.meta = {
          ...elem.meta,
          check: true,
          delete: true,
          add: true,
          edit: true
        }
      })
    }
  })
  commit('SET_ROUTES', accessedRoutes)
  resolve(accessedRoutes)
} else {
  // 如果不是管理员，根据对应身份去获取并设置权限（如下面的 API.GetPermissionData）
  Request.httpRequest({
    method: 'post',
    url: API.GetPermissionData,
    noLoading: true,
    params: {},
    success: (data) => {
      let accessedRoutes = []
      // 匹配前端路由和后台返回的菜单
      accessedRoutes = filterAsyncRoutes(asyncRoutes, data)
      // 重定向404的匹配规则需要在整个完整路由定义的最后面，否则刷新会出错。
      accessedRoutes.push(...notFoundRoutes)
      commit('SET_ROUTES', accessedRoutes)
      resolve(accessedRoutes)
    },
    error: res => {
      reject(res)
    }
  })
}

配置权限获得的模拟信息

const permissionData = () => {
  result.data = [
    {
      name: 'Table',
      children: [
        {
          name: 'TableDemo',
          auth: {
            add: true,
            check: true,
            delete: true,
            edit: true
          }
        }
      ]
    }
  ]
  return result
}

resetRouter

文档

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const createRouter = () => new Router({
  mode: 'history',
  routes: []
})

const router = createRouter()

export function resetRouter () {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // the relevant part
}

export default router