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

作者站长头像
站长
· 阅读数 11

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' });
    }
  },
);

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

回复
1个回答
avatar
test
2024-06-30
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' });
});
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容