Asyn c Middleware на VueJS или способ отловить ошибку в роутере - PullRequest
Новая
       74

Asyn c Middleware на VueJS или способ отловить ошибку в роутере

1 голос
/ 30 апреля 2020

Это мой первый вопрос о переполнении стека.

Я использую VueJS для Frontend и Laravel для Backend. Моя проблема заключается в том, что я должен загрузить модель из моего внутреннего API, которую мой пользователь будет редактировать. Но в этой модели есть политики, поэтому мой API может ответить на ошибку 403, если пользователь не разрешен. Отлично!

Но как справиться с этим в VueJS? Вот мой роутер: 

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

Если я сделаю промежуточное ПО, у меня будет асинхронный ответ, он работает? И если у пользователя есть доступ к данным, могу ли я передать их в свой магазин? Это не выглядит самым чистым способом сделать это ...

Я предпочитаю сделать что-то вроде этого: на моем компоненте страницы, когда я вызываю API, если ответ 403, я хотел бы бросить ошибка. Но где я могу поймать эту ошибку в моей конфигурации маршрутов для автоматического перенаправления с сообщением fla sh?

Есть ли лучший способ сделать это?

Спасибо !!

Ответы [ 2 ]

1 голос
/ 01 мая 2020

Что вы используете для взаимодействия с вашим Laravel API? Топор ios?

Если вы используете топор ios, я бы рекомендовал изучить Топор ios перехватчики . Они позволяют вам захватить что-либо о вашем запросе / ответе до того, как вернется к вашему действию Vuex (или откуда бы он ни вызывался). Итак, когда вы настраиваете свой экземпляр Ax ios, вам нужно сделать что-то вроде следующего фрагмента кода: 

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);
    }
);

Что этот код делает, так это прослушивает ошибку от Ax ios (ваш сервер сделает ошибку ax ios, если получит ответ 4xx или 5xx), а затем проверит код состояния, возвращенный из вашего API, если он обнаружит 404 (не найден) или 403 (запрещен), он будет перенаправить пользователя на не найденную страницу. Это, конечно, можно настроить.

0 голосов
/ 01 мая 2020

я думаю, что это лучший способ,

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>
...