Vue 动态路由配置与权限控制

在单页应用（SPA）中，动态路由允许根据用户权限、角色等动态地生成和管理路由。动态路由配置使得不同权限的用户能够访问不同的页面，同时也确保了未授权用户无法访问敏感页面。

一、基础概念

1. 静态路由与动态路由

静态路由：这些路由是在应用启动时预先定义的，无论用户的权限如何，都会加载这些路由。
动态路由：这些路由根据用户权限动态生成。通常，只有用户具备某种权限时，才会在路由表中添加相应的路由。

2. 动态路由的场景

用户权限控制：根据用户角色动态生成路由，确保不同角色的用户只能访问自己有权限的页面。
菜单权限控制：通过动态路由控制菜单显示，防止用户通过修改 URL 访问没有权限的页面。

二、路由配置

1. 静态路由配置

静态路由是始终存在的路由，不会根据用户权限变化而变化。比如登录、404 页面等。

// router.js

// 静态路由
export const constantRouterMap = [
  {
    path: '/',
    redirect: '/dashboard'
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login')
  },
  {
    path: '/404',
    name: '404',
    component: () => import('@/views/404')
  }
]

2. 动态路由配置

动态路由是在用户登录后，根据用户的角色或权限动态生成的。通常动态路由会在用户登录后通过 API 获取。

// router.js

// 动态路由
export const asyncRouterMap = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import('@/views/Dashboard'),
    meta: { title: '工作台' }
  },
  {
    path: '/user',
    name: 'User',
    component: () => import('@/views/User'),
    meta: { title: '用户管理' }
  },
  {
    path: '/settings',
    name: 'Settings',
    component: () => import('@/views/Settings'),
    meta: { title: '系统设置' }
  }
]

三、动态路由实现

1. 根据用户权限动态添加路由

通过获取用户的权限信息，我们可以根据权限动态地添加路由。在 Vue 中，使用 router.addRoutes() 方法可以动态添加新的路由。

用户权限加载并动态添加路由

假设我们已经从服务器获取了用户的菜单权限数据，接下来将动态生成路由并添加到 Vue Router。

// store.js

// 动态加载用户菜单
addUserMenus({ commit }, menus) {
  commit('setMenuList', menus);

  // 扁平化菜单数据
  const menuList = treeToList(menus);
  const addRoutes = [];

  asyncRouterMap.forEach(route => {
    const tempList = route.children.filter(child => 
      menuList.some(menu => menu.url === child.path)
    );

    if (tempList.length > 0) {
      addRoutes.push({ ...route, children: tempList });
    }
  });

  // 动态添加路由
  router.addRoutes(addRoutes);
}

`treeToList` 函数（将树状结构转换为扁平化列表）

// utils.js

/**
 * 将树形结构转换为列表
 * @param {Array} tree 树形结构的数据
 * @param {String} childKey 子节点的键名
 * @returns {Array} 扁平化的列表
 */
export function treeToList(tree, childKey = 'children') {
  let stack = [...tree];
  const result = [];

  while (stack.length) {
    const node = stack.shift();
    result.push(node);

    if (node[childKey]) {
      stack.push(...node[childKey]);
    }
  }

  return result;
}

2. 在 `router.js` 中动态添加路由

在 Vue 中，我们可以通过 router.addRoutes() 方法将动态生成的路由添加到现有的路由表中。

// router.js

import Vue from 'vue'
import Router from 'vue-router'
import { constantRouterMap } from './staticRoutes'

Vue.use(Router)

const router = new Router({
  routes: constantRouterMap
})

export default router

3. 路由守卫（Router Guards）

为了防止用户直接访问没有权限的页面，可以使用路由守卫来检查用户是否有权限访问该路由。如果没有权限，跳转到 404 或者其他页面。

// router.js

router.beforeEach((to, from, next) => {
  const user = store.state.user;

  // 判断用户是否已登录
  if (!user) {
    if (to.path !== '/login') {
      return next({ path: '/login' });
    }
  } else {
    // 判断用户是否有权限访问该页面
    if (to.meta && to.meta.permission && !user.permissions.includes(to.meta.permission)) {
      return next({ path: '/404' });
    }
  }

  next();
});

四、总结

静态路由：在应用启动时就已经定义，始终有效。
动态路由：根据用户的权限动态生成，通常在用户登录后根据角色或权限来加载相应的路由。
路由守卫：用于控制路由的访问权限，确保用户只能访问有权限的页面。

通过结合静态路由、动态路由和路由守卫，我们可以高效地管理 Vue 应用中的路由和用户权限，确保应用的安全性和灵活性。

付鹏篚

Vue 动态路由配置与权限控制

Vue 动态路由配置与权限控制

一、基础概念

1. 静态路由与动态路由

2. 动态路由的场景

二、路由配置

1. 静态路由配置

2. 动态路由配置

三、动态路由实现

1. 根据用户权限动态添加路由

用户权限加载并动态添加路由

treeToList 函数（将树状结构转换为扁平化列表）

2. 在 router.js 中动态添加路由

3. 路由守卫（Router Guards）

四、总结

`treeToList` 函数（将树状结构转换为扁平化列表）

2. 在 `router.js` 中动态添加路由