В Vue.js, интерцепторы позволяют перехватывать и изменять запросы и ответы перед и после их отправки на сервер. Они используются в основном для добавления аутентификации, обработки ошибок и многих других вещей.
Если вам нужно иметь доступ к экземпляру приложения Vue.js (app) внутри интерцептора для изменения маршрута, вам следует использовать объект router
для этого.
Для начала, убедитесь, что у вас установлен vue-router
путем выполнения команды npm install vue-router
или включите его в своем проекте с помощью CDN.
После установки или включения vue-router
, вы можете создать файл, в котором определите ваш интерцептор. В этом файле вы должны сначала импортировать Vue
, VueRouter
и ваше приложение.
import Vue from 'vue'; import VueRouter from 'vue-router'; import axios from 'axios'; Vue.use(VueRouter); const router = new VueRouter({ // Определение маршрутов }); // Определение интерцептора axios.interceptors.response.use( response => response, error => { if (error.response.status === 401) { // Изменяем роут router.push('/login'); } return Promise.reject(error); } );
В приведенном выше примере мы объявляем объект router
с помощью VueRouter
и определяем маршруты, используемые в вашем приложении. Затем мы определяем интерцептор для объекта axios
, который перехватывает ответы сервера и проверяет статус ошибки. Если код состояния 401, что означает неавторизованный доступ, мы используем router.push()
для перенаправления пользователя на страницу входа.
Обратите внимание, что вам нужно самостоятельно создать и определить маршруты с помощью Vue Router и настроить их в вашем приложении перед использованием router.push()
.
Надеюсь, это помогает! Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.