vue中怎么根据用户权限动态添加路由

发布时间：2021-11-05 13:40:33 作者：iii
来源：亿速云阅读：417

# Vue中怎么根据用户权限动态添加路由

## 前言

在现代前端开发中，权限控制是一个非常重要的环节。特别是在企业级应用中，不同角色的用户需要看到不同的页面和功能。Vue作为目前最流行的前端框架之一，提供了灵活的路由机制，可以很好地实现基于用户权限的动态路由管理。

本文将深入探讨在Vue项目中如何根据用户权限动态添加路由，涵盖从基础概念到高级实现的完整方案，帮助开发者构建安全、高效的权限控制系统。

## 目录

1. [权限控制的基本概念](#权限控制的基本概念)
2. [Vue Router基础回顾](#vue-router基础回顾)
3. [静态路由与动态路由的区别](#静态路由与动态路由的区别)
4. [基于用户权限的动态路由实现方案](#基于用户权限的动态路由实现方案)
5. [路由元信息(meta)在权限控制中的应用](#路由元信息meta在权限控制中的应用)
6. [后端返回权限数据的处理](#后端返回权限数据的处理)
7. [路由守卫实现权限校验](#路由守卫实现权限校验)
8. [动态路由的缓存问题与解决方案](#动态路由的缓存问题与解决方案)
9. [按钮级权限控制](#按钮级权限控制)
10. [最佳实践与常见问题](#最佳实践与常见问题)
11. [总结](#总结)

## 权限控制的基本概念

在开始技术实现之前，我们需要明确几个关键概念：

### 1.1 什么是权限控制

权限控制是指系统对用户访问资源的能力进行限制的一种安全机制。在前端开发中，主要体现在：

- 页面访问权限
- 功能操作权限
- 数据展示权限

### 1.2 RBAC模型

基于角色的访问控制(Role-Based Access Control)是最常用的权限模型，主要包含三个核心元素：

- **用户(User)**: 系统的使用者
- **角色(Role)**: 用户的身份类别(如管理员、普通用户等)
- **权限(Permission)**: 角色所拥有的具体权限

### 1.3 前端权限控制的必要性

虽然前端权限控制不能替代后端安全验证，但它能：

- 提升用户体验，避免无权限用户看到不可访问的页面
- 减少无效请求，减轻服务器压力
- 提供更友好的权限提示

## Vue Router基础回顾

在深入动态路由前，我们先回顾Vue Router的基本用法。

### 2.1 Vue Router的安装与配置

```javascript
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  // 其他路由配置
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

2.2 路由的三种配置方式

静态导入组件
```
import Home from '@/views/Home.vue'
```

动态导入组件(懒加载)

component: () => import('@/views/Home.vue')

嵌套路由

{
 path: '/user',
 component: User,
 children: [
   { path: 'profile', component: Profile }
 ]
}

静态路由与动态路由的区别

3.1 静态路由的特点

静态路由是在应用初始化时就完全定义好的路由配置：

优点：简单直接，适合小型应用
缺点：无法根据用户权限动态变化

示例：


const routes = [
// 所有路由在初始化时就确定
]

3.2 动态路由的特点

动态路由是在运行时根据条件(如用户权限)动态添加的路由：

优点：灵活，适合权限系统复杂的应用
缺点：实现复杂度较高
示例： “`javascript // 初始化时只有基础路由 const routes = [ { path: ‘/login’, component: Login } ]

// 登录后根据权限添加路由 router.addRoutes(dynamicRoutes)


## 基于用户权限的动态路由实现方案

### 4.1 整体实现思路

1. 用户登录后获取权限信息
2. 根据权限筛选可访问的路由
3. 动态添加到路由实例
4. 保存权限状态以供后续使用

### 4.2 方案一：前端存储完整路由表

**实现步骤：**

1. 在前端定义所有可能的路由
2. 通过meta字段标记所需权限
3. 根据用户权限过滤路由

```javascript
// 所有路由定义
const allRoutes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, roles: ['admin'] }
  },
  // 其他路由...
]

// 过滤函数
function filterRoutes(routes, roles) {
  return routes.filter(route => {
    if (route.meta && route.meta.roles) {
      return roles.some(role => route.meta.roles.includes(role))
    }
    return true
  })
}

4.3 方案二：后端返回路由表

实现步骤：

后端返回用户可访问的路由结构
前端动态注册这些路由

// 后端返回的路由结构示例
const backendRoutes = [
  {
    path: '/user',
    component: 'User', // 组件名对应前端的映射
    children: [...]
  }
]

// 组件映射
const componentMap = {
  'User': () => import('@/views/User.vue'),
  // 其他组件...
}

// 转换路由
function transformRoutes(routes) {
  return routes.map(route => {
    return {
      ...route,
      component: componentMap[route.component],
      children: route.children ? transformRoutes(route.children) : []
    }
  })
}

4.4 两种方案的对比

对比项	前端存储路由表	后端返回路由表
维护成本	前端修改后需重新部署	后端可动态调整路由
安全性	路由信息暴露在前端	只返回有权限的路由
实现复杂度	相对简单	需要前后端协调
适用场景	权限结构简单、变化少的系统	大型复杂系统

路由元信息(meta)在权限控制中的应用

5.1 meta字段的基本用法

meta字段可以在路由配置中存储任意信息：

{
  path: '/admin',
  component: Admin,
  meta: {
    requiresAuth: true,
    roles: ['admin', 'superadmin']
  }
}

5.2 常见的meta配置项

meta: {
  requiresAuth: true,    // 是否需要登录
  roles: ['admin'],      // 允许的角色
  permissions: ['user:add'], // 细粒度权限
  title: 'Dashboard',    // 页面标题
  keepAlive: true        // 是否需要缓存
}

5.3 在导航守卫中访问meta

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 需要认证的路由
    if (!store.getters.isAuthenticated) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

后端返回权限数据的处理

6.1 常见的后端权限数据结构

{
  "roles": ["admin"],
  "permissions": ["user:add", "user:edit"],
  "routes": [
    "/dashboard",
    "/user/list"
  ]
}

6.2 数据标准化处理

// 处理函数示例
function normalizePermissionData(data) {
  return {
    roles: data.roles || [],
    permissions: data.permissions || [],
    routePaths: data.routes || []
  }
}

6.3 存储权限状态

建议使用Vuex存储权限信息：

// store/modules/permission.js
const state = {
  roles: [],
  permissions: [],
  routes: []
}

const mutations = {
  SET_PERMISSIONS(state, payload) {
    state.roles = payload.roles
    state.permissions = payload.permissions
    state.routes = payload.routes
  }
}

const actions = {
  async fetchPermissions({ commit }) {
    const res = await api.getPermissions()
    commit('SET_PERMISSIONS', normalizePermissionData(res.data))
    return res.data
  }
}

路由守卫实现权限校验

7.1 全局前置守卫

router.beforeEach(async (to, from, next) => {
  // 1. 判断是否需要认证
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 2. 检查登录状态
    if (!store.getters.token) {
      next(`/login?redirect=${to.path}`)
      return
    }
    
    // 3. 检查是否已获取权限信息
    if (!store.getters.roles.length) {
      try {
        await store.dispatch('user/getUserInfo')
        // 添加动态路由
        const accessRoutes = await store.dispatch('permission/generateRoutes')
        router.addRoutes(accessRoutes)
        // 确保addRoutes完成
        next({ ...to, replace: true })
      } catch (error) {
        // 获取权限失败，重置状态并跳转到登录页
        await store.dispatch('user/resetToken')
        next(`/login?redirect=${to.path}`)
        return
      }
    } else {
      next()
    }
  } else {
    next()
  }
})

7.2 角色权限校验

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

7.3 404页面处理

动态路由需要特别注意404页面的处理：

// 确保404页面是最后添加的路由
const routes = [
  // 其他路由...
  { path: '*', redirect: '/404', hidden: true }
]

动态路由的缓存问题与解决方案

8.1 常见问题

页面刷新后动态路由丢失
路由重复添加导致警告
keep-alive缓存失效

8.2 解决方案

方案一：持久化存储权限信息

// 登录成功后保存权限信息
localStorage.setItem('permissions', JSON.stringify(permissionData))

// 应用初始化时恢复
const savedPermissions = localStorage.getItem('permissions')
if (savedPermissions) {
  store.commit('SET_PERMISSIONS', JSON.parse(savedPermissions))
  const accessRoutes = await store.dispatch('permission/generateRoutes')
  router.addRoutes(accessRoutes)
}

方案二：使用Vuex持久化插件

// vuex-persistedstate配置
import createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({
  plugins: [
    createPersistedState({
      paths: ['permission']
    })
  ],
  modules: {
    permission
  }
})

方案三：处理keep-alive缓存

<template>
  <keep-alive :include="cachedViews">
    <router-view :key="key" />
  </keep-alive>
</template>

<script>
export default {
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    }
  }
}
</script>

按钮级权限控制

除了路由权限，我们通常还需要控制按钮级别的权限。

9.1 自定义指令实现

// 注册全局指令
Vue.directive('permission', {
  inserted(el, binding, vnode) {
    const { value } = binding
    const permissions = store.getters.permissions
    
    if (value && value instanceof Array && value.length > 0) {
      const hasPermission = permissions.some(permission => {
        return value.includes(permission)
      })
      
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`需要指定权限，如 v-permission="['user:add']"`)
    }
  }
})

9.2 使用方法

<template>
  <button v-permission="['user:add']">添加用户</button>
</template>

9.3 函数式校验

// 工具函数
export function checkPermission(permissions) {
  const currentPermissions = store.getters.permissions
  return currentPermissions.some(permission => permissions.includes(permission))
}

// 组件中使用
if (checkPermission(['user:edit'])) {
  // 执行操作
}

最佳实践与常见问题

10.1 最佳实践建议

最小权限原则：只授予用户必要的最小权限
前后端双重验证：前端控制展示，后端验证请求
友好的无权限提示：给用户明确的反馈
权限变更处理：监听权限变化，及时更新路由

10.2 常见问题解决

问题1：动态路由刷新后丢失

解决方案： - 持久化存储权限信息 - 在应用初始化时重新生成路由

问题2：路由重复添加

解决方案：

// 添加前重置路由
const createRouter = () => new VueRouter({
  routes: constantRoutes // 只包含基础路由
})

const router = createRouter()

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher
}

问题3：路由加载顺序问题

解决方案： - 确保404路由最后添加 - 使用路由的path作为key

10.3 性能优化建议

路由懒加载：拆分代码，按需加载
预加载策略：预测用户可能访问的路由
缓存策略：合理使用keep-alive

总结

本文详细介绍了在Vue项目中实现基于用户权限的动态路由管理方案。主要内容包括：

权限控制的基本概念和RBAC模型
静态路由与动态路由的区别
两种主要的动态路由实现方案
路由元信息的灵活运用
后端权限数据的处理与存储
路由守卫的完整实现
动态路由的缓存问题解决
按钮级权限控制
最佳实践与常见问题

通过合理的权限控制设计，可以构建出既安全又用户体验良好的前端应用。希望本文能为你的Vue项目开发提供有价值的参考。

附录

完整代码示例

// permission.js
import router from './router'
import store from './store'
import { Message } from 'element-ui'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

NProgress.configure({ showSpinner: false })

const whiteList = ['/login', '/auth-redirect']

router.beforeEach(async (to, from, next) => {
  NProgress.start()
  if (store.getters.token) {
    if (to.path === '/login') {
      next({ path: '/' })
      NProgress.done()
    } else {
      if (store.getters.roles.length === 0) {
        try {
          await store.dispatch('user/getInfo')
          const accessRoutes = await store.dispatch('permission/generateRoutes')
          router.addRoutes(accessRoutes)
          next({ ...to, replace: true })
        } catch (error) {
          await store.dispatch('user/resetToken')
          Message.error(error || 'Has Error')
          next(`/login?redirect=${to.path}`)
          NProgress.done()
        }
      } else {
        next()
      }
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next(`/login?redirect=${to.path}`)
      NProgress.done()
    }
  }
})

router.afterEach(() => {
  NProgress.done()
})