vue项目,eslint循环引用的问题如何解决?

vue项目,使用eslint,引入了airbnb规范,有一条规则是import/no-cycle,不可以循环引用。
但是在代码里有这样一种场景

// router需要引入vue页面,注册路由
const routes = [
  {
    path: '/signIn',
    component: () => import('../views/signIn'),
  },
  ...
];

// vue页面需要引入定义的接口,执行各种操作
import api from '@/api/user';
export default {
  methods: {
    handleSignIn() {
      const res = await api.signIn(...);
    }
  },
};

// 接口需要引入封装的axios,里面封装好了一些方法配置
import request from './request';
const api = {
  signIn: (...) => request.post(...),
};

// 封装的axios需要引入router,对router执行一些操作,比如过期跳登录页等
import axios from 'axios';
import router from '@/router';
axios.interceptors.response.use(
  () => {},
  ({ response }) => {
    ...
    if (response.status === 401) 
      router.push({ path: '/signIn' });
    }
  },
);

这个场景就会存在循环引用的问题,如果不关这条规则,有什么写法或者设计可以解决呢?

阅读 2.5k
1 个回答
import Vue from 'vue';
export const EventBus = new Vue();

在axios的拦截器中触发事件:

import axios from 'axios';
import { EventBus } from './event-bus.js';

axios.interceptors.response.use(
  () => {},
  ({ response }) => {
    if (response.status === 401) {
      EventBus.$emit('unauthorized');
    }
  },
);

在路由配置中监听这个事件:

import { EventBus } from './event-bus.js';
import router from './router';

EventBus.$on('unauthorized', () => {
  router.push({ path: '/signIn' });
});
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题