当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript实战：前端权限路由控制全解析

JavaScript实战：前端权限路由控制全解析

2026-05-02 11:34:07 0浏览收藏

本文深入解析了JavaScript前端权限路由控制的实战方案，聚焦于如何基于用户角色动态生成并注册合法路由，通过后端返回的权限标识、前端路由meta字段声明访问要求、递归过滤异步路由、router.addRoute动态挂载，以及结合导航守卫实现精准跳转拦截与菜单同步渲染，既保障了页面级访问安全又提升了用户体验；特别强调前端控制仅为体验增强，核心权限校验必须依赖后端，为构建健壮、可维护的管理系统权限体系提供了清晰、通用且落地的实现路径。

JS实现前端权限路由控制_javascript实战

前端权限路由控制是现代单页应用中常见的需求，尤其在管理系统中，不同角色看到的菜单和可访问的页面应有所不同。使用 JavaScript（特别是结合 Vue 或 React 框架）实现权限路由，能有效提升用户体验与系统安全性。下面介绍一种通用、实用的前端权限路由控制方案。

理解权限路由的基本逻辑

权限路由的核心思想是：根据用户登录后的角色或权限列表，动态生成可访问的路由表，并将其注册到前端路由系统中。这样用户只能看到和访问自己有权限的页面。

关键点包括：

后端返回用户权限标识（如 role: "admin" 或 permissions: ["user:list", "user:edit"]）
前端定义路由元信息（meta 字段），标注每个路由所需的权限
登录后，根据权限过滤并生成合法路由
通过 router.addRoute 动态添加路由
配合导航守卫进行实时校验

定义路由结构与权限字段

在 Vue Router 中，可以预先定义两种路由：静态路由（所有人可访问，如登录页）和动态路由（需权限控制）。

示例代码：

// routes.js
const staticRoutes = [
  { path: '/login', component: () => import('@/views/Login') }
]

const asyncRoutes = [
  {
    path: '/user',
    component: () => import('@/layout/Index'),
    meta: { title: '用户管理', roles: ['admin', 'editor'] },
    children: [
      {
        path: 'list',
        component: () => import('@/views/User/List'),
        meta: { title: '用户列表', roles: ['admin'] }
      },
      {
        path: 'profile',
        component: () => import('@/views/User/Profile'),
        meta: { title: '个人中心', roles: ['admin', 'editor'] }
      }
    ]
  },
  {
    path: '/audit',
    component: () => import('@/views/Audit'),
    meta: { title: '审核管理', roles: ['admin'] }
  }
]

其中 roles 字段表示访问该路由所需的角色，也可替换为 permissions 使用更细粒度的权限控制。

动态添加路由并挂载

用户登录成功后，从后端获取其角色或权限列表，然后筛选 asyncRoutes 中符合条件的路由，并通过 router.addRoute 添加到路由系统中。

实现方法：

// permission.js
import router from '@/router'
import { asyncRoutes } from '@/router/routes'
import store from '@/store'

function hasPermission(roles, route) {
  if (route.meta && route.meta.roles) {
    return route.meta.roles.some(role => roles.includes(role))
  }
  return true
}

function filterAsyncRoutes(routes, roles) {
  const res = []
  routes.forEach(route => {
    const tmp = { ...route }
    if (hasPermission(roles, tmp)) {
      if (tmp.children) {
        tmp.children = filterAsyncRoutes(tmp.children, roles)
      }
      res.push(tmp)
    }
  })
  return res
}

const whiteList = ['/login']

router.beforeEach(async (to, from, next) => {
  const token = store.getters.token
  if (token) {
    if (to.path === '/login') {
      next('/')
    } else {
      const hasRoles = store.getters.roles && store.getters.roles.length > 0
      if (hasRoles) {
        next()
      } else {
        try {
          const { roles } = await store.dispatch('user/getUserInfo')
          const accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
          accessedRoutes.forEach(route => {
            router.addRoute(route)
          })
          next({ ...to, replace: true })
        } catch (error) {
          await store.dispatch('user/resetToken')
          next(`/login?redirect=${to.fullPath}`)
        }
      }
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next(`/login?redirect=${to.fullPath}`)
    }
  }
})

上述代码中，通过 Vuex 存储用户信息，并在首次进入时拉取角色数据，再动态生成路由。