面试题：如何根据用户角色实现Vue Router动态路由配置与懒加载的最佳实践？

1. 动态路由配置及懒加载策略

定义路由表结构
- 在router/index.js中定义基础路由表，例如：
```
const routes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue')
  }
];
const router = new VueRouter({
  routes
});
export default router;
```
- 这里对Login组件采用了懒加载的方式，使用import()语法，只有在路由被访问时才会加载对应的组件，提升应用的初始加载性能。

根据角色动态加载路由

在用户登录成功后，获取用户角色信息。假设通过axios获取用户信息，如下：

import axios from 'axios';
export const getRole = async () => {
  const response = await axios.get('/api/user/role');
  return response.data.role;
};

在router/index.js中根据角色动态添加路由。首先定义不同角色对应的路由表：

const adminRoutes = [
  {
    path: '/admin/dashboard',
    name: 'AdminDashboard',
    component: () => import('@/views/AdminDashboard.vue')
  },
  // 其他管理员专属路由
];
const normalUserRoutes = [
  {
    path: '/user/dashboard',
    name: 'UserDashboard',
    component: () => import('@/views/UserDashboard.vue')
  },
  // 其他普通用户专属路由
];

然后在router/index.js的router.beforeEach守卫中动态添加路由：

import { getRole } from './api';
router.beforeEach(async (to, from, next) => {
  const role = await getRole();
  if (role === 'admin') {
    adminRoutes.forEach(route => {
      router.addRoute(route);
    });
  } else if (role === 'normalUser') {
    normalUserRoutes.forEach(route => {
      router.addRoute(route);
    });
  }
  next();
});

2. 路由守卫与权限校验要点及实现方式

路由守卫要点

全局前置守卫：如上述router.beforeEach，可以在每次路由切换前进行权限校验、动态路由加载等操作。注意要确保异步操作（如获取角色信息）完成后再调用next，防止出现路由跳转异常。
全局后置守卫：可以用于记录路由切换日志等操作，不影响路由跳转，例如：

router.afterEach((to, from) => {
  console.log(`从 ${from.path} 跳转到 ${to.path}`);
});

路由独享守卫：在单个路由配置中定义，例如：

const routes = [
  {
    path: '/admin/dashboard',
    name: 'AdminDashboard',
    component: () => import('@/views/AdminDashboard.vue'),
    beforeEnter: (to, from, next) => {
      const role = getRoleSync();// 假设同步获取角色的函数
      if (role === 'admin') {
        next();
      } else {
        next('/login');
      }
    }
  }
];

权限校验实现方式

角色匹配：如上述代码，通过获取用户角色，与预定义的角色权限进行匹配，决定是否允许访问相应路由。
权限列表校验：可以将权限以列表形式存储在后端，用户登录时获取。在路由守卫中，根据当前路由对应的权限标识，检查用户权限列表中是否包含该权限。例如：

router.beforeEach(async (to, from, next) => {
  const permissions = await getPermissions();// 获取用户权限列表
  const routePermission = to.meta.permission;
  if (permissions.includes(routePermission) || to.path === '/login') {
    next();
  } else {
    next('/login');
  }
});

这里to.meta.permission是在路由配置中定义的权限标识，例如：

const routes = [
  {
    path: '/admin/dashboard',
    name: 'AdminDashboard',
    component: () => import('@/views/AdminDashboard.vue'),
    meta: {
      permission: 'admin:dashboard'
    }
  }
];

通过以上步骤，可以基于Vue Router实现动态路由配置，并在路由守卫和权限校验方面保障应用的性能和安全性。

面试题：如何根据用户角色实现Vue Router动态路由配置与懒加载的最佳实践？

知识考点

面试题答案

1. 动态路由配置及懒加载策略

2. 路由守卫与权限校验要点及实现方式