Laravel 11中使用Axios删除数据后，如何在JS中实现跳转与错误处理

我通过Axios和Laravel后端控制器交互，当前代码实现如下：

后端代码（RoleController.php） #

public function delete($id): string
{
    $data = [
        'id' => $id
    ];

    return response()->json($data, 200);
}

前端代码（app.js） #

form.addEventListener('submit', event => {
    event.preventDefault();
    console.log(url);

    axios.delete(url, {
        data: {
            id: id,
        },
    }).then(response => {
        if (response.status === 200) {
            let data = response.data;
            console.log(data);  // <- 如何在此处实现跳转？
        }
    }).catch(error => {
        console.log(error.message);
    });
});

原本在Laravel控制器里，我可以直接用下面的代码实现页面跳转和错误提示：

return redirect()->route('roles.index')->with('error', __('Role deleted'));

// 或者抛出权限错误
abort(403, __('SUPER ADMIN ROLE CAN NOT BE DELETED'));

现在需要改成在前端JS接收响应后完成类似的跳转和错误提示操作，该怎么实现？

1. 页面跳转（对应控制器的redirect逻辑） #

在Axios的then回调里，直接通过window.location.href就能实现页面跳转。如果需要传递删除成功的提示信息，可以用localStorage临时存储或者URL参数：

方式1：带提示信息跳转 #

先修改后端控制器，返回跳转地址和提示内容：

public function delete($id): \Illuminate\Http\JsonResponse
{
    // 这里先执行你的角色删除逻辑
    
    return response()->json([
        'id' => $id,
        'redirect_url' => route('roles.index'), // Laravel生成跳转路由
        'message' => __('Role deleted')
    ], 200);
}

前端接收响应后，把提示存到localStorage，再跳转：

.then(response => {
    if (response.status === 200) {
        const { redirect_url, message } = response.data;
        // 临时存储提示信息
        localStorage.setItem('delete_success_msg', message);
        // 跳转到目标页面
        window.location.href = redirect_url;
    }
})

然后在跳转后的页面（比如角色列表页）添加JS代码，读取并显示提示：

// 页面加载时检查是否有提示
document.addEventListener('DOMContentLoaded', () => {
    const successMsg = localStorage.getItem('delete_success_msg');
    if (successMsg) {
        // 创建提示元素并插入页面（样式可以自己调整）
        const alertBox = document.createElement('div');
        alertBox.className = 'alert alert-success';
        alertBox.textContent = successMsg;
        document.querySelector('.container').prepend(alertBox);
        
        // 3秒后自动移除提示
        setTimeout(() => alertBox.remove(), 3000);
        // 清除localStorage里的内容
        localStorage.removeItem('delete_success_msg');
    }
});

方式2：直接跳转（无需提示） #

如果不需要提示信息，直接在then里写跳转代码就行：

.then(response => {
    if (response.status === 200) {
        // 直接跳转到角色列表页，替换成你的实际地址
        window.location.href = '/roles';
        // 或者提前在页面定义好Laravel生成的路由变量
        // window.location.href = rolesIndexUrl;
    }
})

2. 错误处理（对应控制器的abort逻辑） #

后端需要返回对应的HTTP状态码和错误信息，而不是直接abort：

public function delete($id): \Illuminate\Http\JsonResponse
{
    // 假设超级管理员角色ID是1，判断是否禁止删除
    if ($id == 1) {
        return response()->json([
            'message' => __('SUPER ADMIN ROLE CAN NOT BE DELETED')
        ], 403);
    }

    // 执行删除逻辑...
    
    return response()->json([
        'id' => $id,
        'redirect_url' => route('roles.index'),
        'message' => __('Role deleted')
    ], 200);
}

前端在Axios的catch回调里处理错误响应：

.catch(error => {
    if (error.response) {
        // 服务器返回了错误状态码
        if (error.response.status === 403) {
            const errorMsg = error.response.data.message;
            // 创建错误提示并显示
            const errorAlert = document.createElement('div');
            errorAlert.className = 'alert alert-danger';
            errorAlert.textContent = errorMsg;
            document.body.prepend(errorAlert);
            
            // 3秒后自动消失
            setTimeout(() => errorAlert.remove(), 3000);
        } else {
            console.error('请求出错:', error.response.data.message);
        }
    } else {
        console.error('网络异常:', error.message);
    }
})

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