VueJS上的异步中间件或在路由器上抓取错误的方法。

Question

这是我在Stack Overflow上的第一个问题，我使用VueJS做前端，Laravel做后端。

我使用VueJS做前端, Laravel做后端. 我的问题是我必须从我的后端API加载一个模型, 我的用户将编辑这个模型. 但是这个模型有一些策略, 所以如果用户不被允许的话, 我的API可以响应403错误. 很完美！但如何在Vue中处理它？

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

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

如果我做一个中间件，我将有异步的响应，它的工作？如果用户有访问数据，我可以把它传递到我的商店？这看起来不是最简单的方法... ...

我更喜欢这样做：在我的页面组件上，当我调用API时，如果响应是403，我想抛出一个错误。但是，我在哪里可以在我的路由配置中捕捉到这个错误，并自动用一条闪光信息进行重定向？

有什么更好的方法来做到这一点？

谢谢！！！这是我在Stack上的第一个问题。

Answer 1

你用什么来和Laravel api交互? Axios?

如果你用的是 axios, 我建议你研究一下 Axios拦截器. 他们让你捕捉任何关于你的请求响应 之前 它回到你的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并得到结果，如果你得到一些错误，你会显示一个对话框或其他东西。

<script>
export default {
    beforeRouteEnter(to, from, next) {
        //check param is a real number
        if (!isNaN(to.params.id)) {
            next();
        }
        else {
            next(false); //or show message error (maybe redirect to a /error)
        }
    },
    mounted(){
        axios
            .get('yoursite.com').then((response) => this.response = response)
            .catch((error) => {
                //show error or redirect to (/error or /logout)
            })
    }
}
</script>