主流的前端权限控制方式
1、动态添加路由（推荐用于后端权限控制为主）
前端只维护公共路由（如首页、个人中心等），而具体的权限页面由后端返回的权限数据与本地静态路由表进行匹配，然后通过 addRoute 实现动态添加。这种方式适合权限较为复杂、可变性强的系统。
2、全量路由 + 前端控制（本文重点）
前端维护一份完整的路由表，每个路由通过 meta 字段指定权限信息。登录后，前端根据用户的权限信息，判断是否有权访问某些页面，从而控制页面访问和路由跳转。
路由配置示例
以 system 页面为例，我们在 meta 中配置所需权限：
{
path: '/system',
name: 'system',
meta: {
needAuth: ['admin'] // 仅管理员可访问
},
component: () => import('@/views/system/System.vue')
}
在 meta.needAuth 中，我们可以配置多个角色，如 admin、manager、user、guest 等，以实现更灵活的权限控制。
权限校验逻辑
router.beforeEach((to, from) => {
const needAuthRoles = to.meta?.needAuth as string[] | undefined; // 路由所需权限
const userRoles = userStore.user.roles; // 当前用户拥有的角色
const requiresAuth = Array.isArray(needAuthRoles) && needAuthRoles.length > 0; // 是否需要权限
const hasPermission = userRoles.some((role: string) => needAuthRoles?.includes(role)); // 是否有权限访问
if (requiresAuth && !hasPermission) {
// 无权限，跳转到首页或403页面
return { path: '/' };
}
});
补充解释说明
这在 needAuthRoles = [] 的情况下会是 true，但其实空数组代表“不需要权限” 。使用 Array.isArray(...) && length > 0 的判断方式，是为了避免空数组被当成需要权限的情况。
权限控制方案还有很多变种，欢迎大家留言探讨你们的实践经验，如有疏漏或不妥之处，欢迎在评论区指出，互相学习，共同进步！
