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

Warning: count(): Parameter must be an array or an object that implements Countable in /home/styllloz/public_html/qa-theme/donut-theme/qa-donut-layer.php on line 274
0 like 0 dislike
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' = 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 | 20 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."; });

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

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
35,573 users