As with axios to catch errors in one place and then redirect the user or show modelco depending on the error?

0 like 0 dislike
12 views
The problem is this: I do queries using axios to the server. With catch lobe errors, and if API 401 Unauthorized response need to redirect the user to the login page; upon receiving from the API response 403 Forbidden the user needs to show a modal window that says “Access denied”

Is there a way to catch them in one place?
Using axios, vue.js vue-router. Show any of modelki I have made so that she was transferred to St.-in date modal = true and it showed.

Now I have separate config file for nastroen any request to the API
import from axios '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}


Tried to redirecting with axios.interceptors.response.use and this.$router.push({ path: '/login' }) but receive the error
TypeError: Cannot read property '$router' of undefined at __WEBPACK_IMPORTED_MODULE_0_axios___default.a.interceptors.response.use
I think maybe there's another way
by | 12 views

1 Answer

0 like 0 dislike
In principle the approach is correct, I use this myself, but with a show of Mogilnikov not experienced, I simply configured a redirect. You need to connect the router via import since using this there get through to him will not work.
In the file router.js
const LoginView = () => import('@/views/Login'); const router = new Router({ base: '/', mode: 'history', routes: [ { path: '/login', name: 'login', component: LoginView, } ], }); export default router;

In the file config axios
import from axios '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); });


PS it is Possible to do a redirect with the right props and then you can show magalnick, if you need props on display.
by

Related questions

0 like 0 dislike
1 answer
0 like 0 dislike
2 answers
0 like 0 dislike
3 answers
110,608 questions
257,186 answers
0 comments
33,949 users