Как с помощью axios отлавливать ошибки в одном месте и потом редиректить пользователя или показывать модалку в зависимости от ошибки?

Question

[nastya_zholudeva]

Задача такая: Я делаю запросы с помощью axios к серверу. С помощью catch лювлю ошибки и если API ответа 401 Unauthorized нужно переадресовывать пользователя на страницу авторизации; при получения от API ответа 403 Forbidden пользователю необходимо показать модальное окно с надписью “Доступ запрещен”

Есть ли способ отлавливать их в одном месте?
Использую axios, vue.js, vue-router. Показ любой модалки у меня сделан так, чтобы ей передавалось св-во даты modal = true и она показывалась.

Сейчас у меня отдельным файлом config настроин любой запрос к API

import axios from 'axios'
import api_config from '../../api_config'

function request(method, url, params, data) {
  let axios_config = {
    // `baseURL` is the server URL that will be used for the request
    baseURL: api_config.api_url,

    // `method` is the request method to be used when making the request
    method: method,

    // `url` will be prepended to `baseURL` unless `baseURL` is absolute.
    url: url,

    headers: {
      Authorization: 'Bearer ' + api_config.api_token
    }
  }

  if (params) {
    // `params` are the URL parameters to be sent with the request
    axios_config.params = params
  }

  if (data) {
    // `data` allows changes to the request data before it is sent to the server
    // This is only applicable for request methods 'PUT', 'POST', and 'PATCH'
    axios_config.data = data
  }

  // intercept responses before they are handled by then or catch
  axios.interceptors.response.use((response) => {
    console.log('response', response)
    return response
  }, (error) => {
    if (error.response.status == 401) {
      this.$router.push({ path: '/login' })
    }
    console.log('1111error', error.response.status)
    // return Promise.reject(error);
  })

  return axios(axios_config)
}

function get(url) {
  return request('get', url, null, null)
}

function post(url, data) {
  data = data || {}
  return request('post', url, null, data)
}

function put(url, data) {
  data = data || {}
  return request('put', url, null, data)
}

function remove(url) {
  return request('delete', url, null, null)
}

export default {get, post, put, remove, request}

Пробовала редеректить с помощью axios.interceptors.response.use и this.$router.push({ path: '/login' }) но получаю ошибку

TypeError: Cannot read property '$router' of undefined
    at __WEBPACK_IMPORTED_MODULE_0_axios___default.a.interceptors.response.use

вот думаю может есть другой способ

Answer 1

[Михаил]

В принципе подход верный, сам пользуюсь таким, правда с показом модальников не сталкивался, у меня просто настроен редирект. Вам необходимо подключить роутер через import, так как через this тут к нему достучаться не получится.
В файле router.js

const LoginView = () => import('@/views/Login');
const router = new Router({
  base: '/',
  mode: 'history',
  routes: [
    {
      path: '/login',
      name: 'login',
      component: LoginView,
    }
  ],
});
export default router;

В файле с конфигом axios

import axios from 'axios';
import router from '../router';
const instance = axios.create({ baseURL });

instance.interceptors.response.use(undefined, (error) => {
  if (error.response && error.response.status === 401) {
    router.replace({
      path: '/login',
      query: { redirect: router.currentRoute.fullPath },
    });
  }
  return Promise.reject(error.response.data);
});

P.S. Можно редирект сделать с нужными props и тогда вы сможете показать модальник, если нужный пропс выставлен.

Comments

[nastya_zholudeva]

Михаил

Можно редирект сделать с нужными props и тогда вы сможете показать модальник, если нужный пропс выставлен.

.
1. А как делать редирект, если такая проверка должна проходить в каждом запросе на каждой странице? По идее она должна редиректить на предыдущую страницу, там где доступ есть.
2. Я правильно думаю, что модалку нужно подключать в App.vue чтобы доступ был на каждой странице, хотя мне кажется, что там она сработает 1 только раз