如何在 Vue Router 中实现动态路由和权限控制，确保用户只能访问其有权限的页面？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

大家好，我是老码农，今天咱们来聊聊 Vue Router 里的“动态路由和权限控制”这俩兄弟。这俩兄弟组合起来，能让你的网站变得既灵活又安全，就像给你的网站装了个智能门禁系统！

为什么需要动态路由和权限控制？

想象一下，你正在开发一个后台管理系统，不同的用户角色（比如管理员、编辑、普通用户）能看到和操作的内容是不一样的。如果每个角色都写一套路由，那代码量会爆炸，维护起来更是噩梦。

这时候，动态路由和权限控制就派上用场了。它可以：

动态生成路由： 根据用户的角色，动态生成对应的路由表，避免冗余代码。
权限控制： 在用户访问页面之前，检查其是否有权限，没权限就直接跳转到无权限页面或者登录页面，保证安全性。

实现思路

实现动态路由和权限控制，大致可以分为以下几个步骤：

登录认证： 用户登录后，获取用户的角色信息。
动态路由生成： 根据用户的角色信息，生成对应的路由表。
路由注册： 将生成的路由表注册到 Vue Router 中。
路由守卫： 使用 Vue Router 的导航守卫，在路由跳转前进行权限验证。

详细步骤及代码示例

1. 登录认证

这一步的重点是获取用户的角色信息。通常，这会通过 API 请求从后端获取。为了简化示例，我们直接模拟一个登录过程，并把角色信息存储在 localStorage 中。

// 模拟登录
function login(username, password) {
  // 实际场景中，这里会调用 API 进行登录验证
  if (username === 'admin' && password === '123') {
    localStorage.setItem('user', JSON.stringify({
      username: 'admin',
      role: 'admin' // 角色：管理员
    }));
    return true;
  } else if (username === 'editor' && password === '123') {
    localStorage.setItem('user', JSON.stringify({
      username: 'editor',
      role: 'editor' // 角色：编辑
    }));
    return true;
  }
  return false;
}

// 获取用户信息
function getUserInfo() {
  const userStr = localStorage.getItem('user');
  return userStr ? JSON.parse(userStr) : null;
}

// 退出登录
function logout() {
  localStorage.removeItem('user');
}

2. 动态路由生成

这一步是核心。我们需要定义好不同角色对应的路由信息，然后根据用户的角色，生成对应的路由表。

首先，定义一个路由元信息表，用于存储每个路由的权限信息：

const routeMeta = {
  '/home': {
    roles: ['admin', 'editor', 'user'] // 允许所有角色访问
  },
  '/admin': {
    roles: ['admin'] // 只允许管理员访问
  },
  '/editor': {
    roles: ['admin', 'editor'] // 只允许管理员和编辑访问
  },
  '/profile': {
    roles: ['admin', 'editor', 'user'] // 允许所有角色访问
  }
};

接下来，定义静态路由，这些路由是所有用户都可以访问的，比如登录页、404 页等：

// 静态路由
const staticRoutes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('./components/Login.vue') // 替换成你的登录组件
  },
  {
    path: '/404',
    name: 'NotFound',
    component: () => import('./components/NotFound.vue') // 替换成你的 404 组件
  },
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: () => import('./components/Home.vue') // 替换成你的 Home 组件
  }
];

然后，定义动态路由，这些路由需要根据用户的角色进行过滤：

// 动态路由
const dynamicRoutes = [
  {
    path: '/admin',
    name: 'Admin',
    component: () => import('./components/Admin.vue'), // 替换成你的 Admin 组件
    meta: { roles: ['admin'] } // 权限控制
  },
  {
    path: '/editor',
    name: 'Editor',
    component: () => import('./components/Editor.vue'), // 替换成你的 Editor 组件
    meta: { roles: ['admin', 'editor'] } // 权限控制
  },
  {
    path: '/profile',
    name: 'Profile',
    component: () => import('./components/Profile.vue'), // 替换成你的 Profile 组件
    meta: { roles: ['admin', 'editor', 'user'] } // 权限控制
  }
];

现在，编写一个函数，根据用户的角色过滤动态路由：

// 根据角色过滤路由
function filterRoutes(routes, role) {
  const accessedRoutes = routes.filter(route => {
    if (route.meta && route.meta.roles) {
      return route.meta.roles.includes(role);
    }
    return true; // 如果没有 roles，则默认允许访问
  });
  return accessedRoutes;
}

3. 路由注册

在 Vue Router 中注册路由。

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: staticRoutes // 先注册静态路由
});

export default router;

4. 路由守卫

使用 Vue Router 的 beforeEach 导航守卫，在路由跳转前进行权限验证。

router.beforeEach((to, from, next) => {
  const userInfo = getUserInfo();

  if (!userInfo && to.name !== 'Login') {
    // 如果未登录，且要访问的不是登录页面，则跳转到登录页面
    next({ name: 'Login' });
  } else if (userInfo && to.name === 'Login') {
    // 如果已登录，且要访问的是登录页面，则跳转到首页
    next({ name: 'Home' });
  } else if (userInfo) {
    // 如果已登录，则进行权限验证
    const userRole = userInfo.role;
    const matchedRoute = dynamicRoutes.find(route => route.path === to.path);

    if (matchedRoute && matchedRoute.meta && matchedRoute.meta.roles && !matchedRoute.meta.roles.includes(userRole)) {
      // 如果路由需要权限，但用户没有权限，则跳转到 404 页面
      next({ name: 'NotFound' });
    } else {
      // 用户有权限，继续跳转
      next();
    }
  } else {
    // 其他情况，继续跳转
    next();
  }
});

5. 动态添加路由

在登录成功后，需要动态添加路由。

// 在登录成功后调用
function addDynamicRoutes(role) {
  const accessedRoutes = filterRoutes(dynamicRoutes, role);

  accessedRoutes.forEach(route => {
    router.addRoute(route);
  });

  // 添加一个 catch-all 路由，用于处理 404 情况
  router.addRoute({
    path: '/:catchAll(.*)',
    redirect: '/404'
  });
}

// 使用示例 (在 Login.vue 中)
import { useRouter } from 'vue-router';
import { login, getUserInfo, addDynamicRoutes } from '../utils/auth'; // 替换成你的认证工具

export default {
  // ...
  setup() {
    const router = useRouter();

    const handleLogin = (username, password) => {
      if (login(username, password)) {
        const userInfo = getUserInfo();
        addDynamicRoutes(userInfo.role); // 添加动态路由
        router.push('/home'); // 跳转到首页
      } else {
        // 登录失败处理
        alert('用户名或密码错误');
      }
    };

    return {
      handleLogin
    };
  }
  // ...
}

完整代码示例 (main.js)

import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 导入 router

// 在应用挂载之前使用 router
createApp(App).use(router).mount('#app');

目录结构

为了更好地组织代码，可以采用以下目录结构：

src/
├── components/
│   ├── Admin.vue
│   ├── Editor.vue
│   ├── Home.vue
│   ├── Login.vue
│   └── NotFound.vue
├── router/
│   └── index.js  // 包含路由配置和导航守卫
├── utils/
│   └── auth.js   // 包含登录、退出、获取用户信息等方法
└── App.vue
└── main.js

总结

通过以上步骤，我们就实现了一个简单的动态路由和权限控制系统。核心在于：

定义清晰的路由元信息： 明确每个路由的权限要求。
灵活的路由过滤： 根据用户角色动态生成路由表。
强大的路由守卫： 在路由跳转前进行权限验证。

优化方向

以上只是一个基础的实现，还有很多可以优化的地方：

更细粒度的权限控制： 可以根据用户的具体权限（比如某个按钮的显示隐藏）进行更细粒度的控制。
后端控制路由： 将路由信息存储在后端，前端每次登录都从后端获取路由表，这样可以更好地维护和更新路由信息。
缓存路由： 对于已经加载过的路由，可以进行缓存，避免重复加载。

表格总结

功能	实现方式	优点	缺点
登录认证	模拟登录，实际项目中需要调用 API	简单易懂	安全性较低，仅用于示例
动态路由生成	根据用户角色过滤预定义的路由表	灵活，易于维护	需要维护路由表，如果路由很多，会比较复杂
路由注册	使用 `router.addRoute` 动态添加路由	可以在运行时添加路由，非常灵活	需要在登录后手动添加路由
路由守卫	使用 `router.beforeEach` 进行权限验证	可以集中处理权限逻辑，避免在每个组件中重复编写权限判断代码	性能会有一定影响，每次路由跳转都需要进行权限验证
权限控制粒度	基于路由的权限控制	简单易用	无法进行更细粒度的权限控制，比如控制某个按钮的显示隐藏
适用场景	中小型项目，权限需求不太复杂的项目	快速搭建，易于理解	大型项目或权限需求复杂的项目可能需要更复杂的解决方案

好了，今天的讲座就到这里。希望这些内容能帮助你更好地理解 Vue Router 的动态路由和权限控制。记住，代码只是工具，思路才是王道！祝大家编程愉快！