Question

这是我关于堆栈溢出的第一个问题。

我将VueJS用于前端，将Laravel用于后端。我的问题是我必须从我的用户将要编辑的后端API加载模型。但是有关于该模型的策略，因此如果不允许该用户，我的API可以响应403错误。完美！

但是如何在VueJS中处理它？这是我的路由器：

{ path: '/article/:id(\\d+)/edit', component: page('article/edit/index.vue') }

如果我做一个中间件，我将异步获得响应，这行得通吗？如果用户有权访问数据，我可以将其传递给我的商店吗？看起来不是最干净的方法...

我喜欢做这样的事情：在我的页面组件上，当我调用API时，如果响应为403，我想抛出一个错误。但是，在哪里可以在路由配置中捕获该错误以通过Flash消息自动重定向？

有更好的方法吗？

谢谢!!

Answer 1

您正在使用什么与Laravel api进行交互？ Axios？

如果您使用的是axios，建议您研究Axios interceptors。他们可以让您在之前捕获有关您的请求/响应的任何信息，使它们回到您的Vuex操作（或从何处调用）。因此，在设置Axios实例时，您需要执行以下代码片段：

import axios from 'axios';
import router from '../router';

axios.interceptors.response.use(
    response => {
        return Promise.resolve(response);
    },
    error => {
        const { status, data } = error.response;
        if (status === 404 || status === 403) {
            router.push("/not-found");
        }
        return Promise.reject(error);
    }
);

该代码正在执行的操作是侦听Axios的错误（如果后端收到4xx或5xx响应，则后端将产生axios错误），然后检查从API返回的状态代码（如果它检测到404）（不是（找到）或403（禁止），它将把用户重定向到一个未找到的页面。这当然可以自定义。

Answer 2

我认为这是最好的方法，

1首先，您检查路由器参数是否为实数 2调用api并获取结果，如果出现错误则显示对话框或其他内容

resultString

VueJS上的异步中间件或捕获路由器错误的方法

2 个答案: