如何利用Laravel策略类逻辑校验权限，保护Vue Router路由？

要避免在Vue中重复编写Laravel里已有的权限逻辑，最佳方案是通过后端API暴露权限检查接口，然后在Vue Router的导航守卫中调用这个接口完成权限校验。这样所有权限逻辑都只在Laravel的Policy中维护，前端仅负责调用验证，完全复用已有规则。

下面是具体实现步骤：

1. 在Laravel中新增权限检查API接口 #

首先需要创建一个API路由，让前端能查询当前用户是否拥有编辑指定任务的权限：

1.1 添加API路由 #

在routes/api.php中添加以下路由：

use App\Http\Controllers\TaskPermissionController;

Route::get('/tasks/{task}/can-update', [TaskPermissionController::class, 'canUpdate']);

1.2 创建对应的控制器 #

生成TaskPermissionController并实现canUpdate方法，直接复用TaskPolicy的逻辑：

<?php

namespace App\Http\Controllers;

use App\Models\Task;
use Illuminate\Support\Facades\Gate;

class TaskPermissionController extends Controller
{
    public function canUpdate(Task $task)
    {
        // 直接调用TaskPolicy的update方法进行权限判断
        $canUpdate = Gate::allows('update', $task);
        
        return response()->json([
            'can_update' => $canUpdate
        ]);
    }
}

这里利用Laravel的Gate门面自动匹配对应的TaskPolicy中的update方法，完全复用你已经写好的权限逻辑。

2. 在Vue Router中实现导航守卫 #

接下来在Vue Router的路由配置中，为编辑任务的路由添加权限校验逻辑，推荐使用路由独享守卫，也可以用全局守卫统一处理：

2.1 路由独享守卫示例 #

在routes.js中，针对/tasks/:task/edit路由添加beforeEnter守卫：

import axios from 'axios';

const routes = [
  // 其他路由...
  {
    path: '/tasks/:task/edit',
    name: 'TaskEdit',
    component: () => import('../views/TaskEdit.vue'),
    beforeEnter: async (to, from, next) => {
      try {
        // 获取路由参数中的task ID
        const taskId = to.params.task;
        // 调用后端权限检查接口
        const response = await axios.get(`/api/tasks/${taskId}/can-update`);
        
        if (response.data.can_update) {
          // 有权限，继续导航
          next();
        } else {
          // 无权限，重定向到任务详情页并提示用户
          next({ name: 'TaskShow', params: { task: taskId } });
          alert('你没有编辑该任务的权限');
        }
      } catch (error) {
        // 请求失败（比如任务不存在、用户未登录），重定向到首页
        next('/');
        console.error('权限校验失败:', error);
      }
    }
  },
  // 其他路由...
];

export default routes;

2.2 全局守卫（可选） #

如果有多个需要权限校验的路由，可以注册全局前置守卫统一处理：

router.beforeEach(async (to, from, next) => {
  // 判断当前路由是否需要任务编辑权限校验
  if (to.meta.requiresTaskUpdatePermission) {
    const taskId = to.params.task;
    try {
      const response = await axios.get(`/api/tasks/${taskId}/can-update`);
      if (response.data.can_update) {
        next();
      } else {
        next({ name: 'TaskShow', params: { task: taskId } });
      }
    } catch (error) {
      next('/');
    }
  } else {
    next();
  }
});

然后在需要校验的路由中添加meta标记：

{
  path: '/tasks/:task/edit',
  name: 'TaskEdit',
  component: () => import('../views/TaskEdit.vue'),
  meta: { requiresTaskUpdatePermission: true }
}

3. 额外优化建议 #

• 缓存权限结果：如果用户多次访问同一个任务的编辑页，可以把权限结果缓存到本地，避免重复请求API，提升体验。
• 统一错误处理：在axios的拦截器中统一处理未登录、权限不足的情况，比如自动跳转到登录页。
• 加载状态：在权限校验过程中显示加载动画，避免用户重复操作。

这种方案的核心优势是权限逻辑单一来源，所有规则都在Laravel的Policy中维护，前端仅做调用，完全避免了重复代码，也保证了前后端权限判断的一致性。

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