如何在Vue中保护路由，防止非授权用户访问他人会议？

要阻止非授权用户访问他人创建的会议，需要结合前端导航守卫拦截和后端接口权限校验来实现，以下是具体步骤：

1. 后端层面（核心安全校验） #

这是最关键的一环，必须在后端完成权限校验，防止用户绕过前端限制直接调用接口：

• 从请求头的Bearer令牌中解析当前登录用户的ID
• 针对查询会议详情的接口，添加校验逻辑：查询User与Meeting的关联表，确认当前用户是该会议的创建者或参与者
• 如果用户无权限，返回403或404状态码；有权限则返回会议数据

也可以单独提供一个权限校验接口（比如/api/meeting/check-access/:meetingId），专门用于验证当前用户是否有权访问指定会议，返回布尔值结果。

2. 前端导航守卫修改 #

在现有导航守卫中，针对/meeting/:id路由添加额外的权限校验逻辑：

if(to.matched.some((record) => record.meta.requiresAuth)) {
    const token = localStorage.getItem('Bearer');
    if(token){
        // 检查是否是需要会议权限校验的路由
        if(to.matched.some(record => record.meta.requiresMeetingAuth)) {
            const meetingId = to.params.id;
            // 调用后端权限校验接口
            axios.get(`/api/meeting/check-access/${meetingId}`, {
                headers: { Authorization: token }
            }).then(res => {
                if(res.data.hasAccess) {
                    next(); // 有权限，放行
                } else {
                    next('/404'); // 无权限，跳404
                }
            }).catch(err => {
                // 请求失败（如会议不存在、服务器错误），跳404
                next('/404');
            });
        } else {
            next(); // 其他需登录的路由直接放行
        }
    }
    else{
        next('/') // 未登录，跳登录页
    }
} 
else if(localStorage.getItem('Bearer') && to.matched.some((record) => record.meta.unAuthenticated)){
    next('/dashboard');
}
else next();

3. 路由配置更新 #

给会议路由添加专属的meta标识，方便导航守卫识别：

{
    path: '/meeting/:id',
    component: Meeting,
    props: true,
    meta: {
        requiresAuth: true,
        requiresMeetingAuth: true // 新增：标识该路由需要会议权限校验
    }
},

4. 组件内二次校验（可选但推荐） #

为了防止用户直接刷新页面绕过导航守卫，在Meeting组件的created或mounted钩子中再次校验权限：

export default {
    created() {
        const token = localStorage.getItem('Bearer');
        const meetingId = this.$route.params.id;
        axios.get(`/api/meeting/check-access/${meetingId}`, {
            headers: { Authorization: token }
        }).then(res => {
            if(!res.data.hasAccess) {
                this.$router.push('/404');
            }
        }).catch(() => {
            this.$router.push('/404');
        });
    }
}

关键注意事项 #

• 前端校验仅优化用户体验，后端权限校验才是安全核心，所有涉及会议数据的接口都必须添加权限校验
• 建议将用户信息（如用户ID）存储在Vuex中，而非仅依赖localStorage，避免被篡改
• 可根据业务需求，将无权限跳转目标改为专门的“无权限访问”页面，而非直接跳404

内容的提问来源于stack exchange，提问作者jop frenken