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 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容