Vue.js + Laravel 中实现页面权限控制：无权限时隐藏菜单并拦截路由访问方案咨询

嘿，这个需求我之前在Vue+Laravel的项目里刚好落地过，分后端安全校验和前端体验优化两部分配合来做，既能满足菜单隐藏的需求，又能彻底拦截非法URL访问，给你拆解下具体步骤：

一、后端（Laravel）核心校验 #

后端是权限控制的根本，绝对不能只靠前端（毕竟前端很容易被篡改），主要做两件事：

• 登录返回用户权限集合
  用户登录成功后，除了返回token，还要把该用户拥有的所有权限标识（比如view_campaign_list）一起返回给前端。如果用了Spatie Permission这类权限包，直接用auth()->user()->getPermissionNames()就能拿到；如果是自定义权限表，就查关联表获取权限列表。示例返回结构大概是：

  return response()->json([
      'token' => $token,
      'user' => auth()->user(),
      'permissions' => auth()->user()->getPermissionNames() // 返回['view_campaign_list', ...]
  ]);
  

• 路由中间件拦截非法访问
  给营销活动列表的后端接口（比如获取活动列表的API）以及页面路由（如果是SSR的话）加上自定义权限校验中间件：

  1. 创建中间件：php artisan make:middleware CheckPermission
  2. 在中间件的handle方法里校验权限：

     public function handle(Request $request, Closure $next, $permission)
     {
         if (!auth()->user()->hasPermissionTo($permission)) {
             return abort(403, '无访问权限');
         }
         return $next($request);
     }
     

  3. 在Kernel.php里注册中间件别名，然后给路由绑定：

     // API路由示例
     Route::get('/campaigns', [CampaignController::class, 'index'])->middleware('permission:view_campaign_list');
     

二、前端（Vue.js）体验优化 #

前端主要负责菜单隐藏和路由跳转拦截，提升用户体验：

• 动态渲染菜单
  把菜单数据（可以是前端写死，也可以从后端接口获取）里的每个菜单项都对应一个权限标识，比如：

  const menuItems = [
      { name: '营销活动', path: '/campaigns', permission: 'view_campaign_list' },
      // 其他菜单项...
  ];
  

  渲染菜单时，根据登录后存在Vuex/Pinia里的用户权限列表过滤：

  <template>
    <el-menu>
      <el-menu-item
        v-for="item in menuItems.filter(item => userPermissions.includes(item.permission))"
        :key="item.path"
        :index="item.path"
      >
        {{ item.name }}
      </el-menu-item>
    </el-menu>
  </template>
  

• 路由守卫拦截非法跳转
  用Vue Router的全局前置守卫，在跳转前校验目标路由的权限：

  1. 给路由配置元信息meta.requiresPermission：

     const routes = [
         {
             path: '/campaigns',
             name: 'CampaignList',
             component: () => import('../views/CampaignList.vue'),
             meta: { requiresPermission: 'view_campaign_list' }
         },
         // 其他路由...
     ];
     

  2. 全局守卫里做校验：

     router.beforeEach((to, from, next) => {
         const userPermissions = store.state.user.permissions; // 从Vuex/Pinia取权限
         if (to.meta.requiresPermission) {
             if (userPermissions.includes(to.meta.requiresPermission)) {
                 next();
             } else {
                 next('/403'); // 跳转到无权限页面
             }
         } else {
             next();
         }
     });
     

额外注意点 #

• 前端的权限列表建议同时存在内存（Vuex/Pinia）和localStorage里，页面刷新时先从localStorage取，再异步请求后端接口更新，避免页面空白；
• 一定要确保后端接口都做了权限校验，哪怕前端拦截了，直接调用API也不能返回敏感数据；
• 如果是SPA应用，Laravel的页面路由可以统一指向入口文件，前端路由自己处理，但后端API的权限校验绝对不能省略。

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