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' });
}
},
);
这个场景就会存在循环引用的问题,如果不关这条规则,有什么写法或者设计可以解决呢?
在axios的拦截器中触发事件:
在路由配置中监听这个事件: