目标是在API返回状态401时显示LOGIN模式
我们在main.js中添加了一个组件
var vm = new Vue({
el: '#app',
router,
store
});
Vue.component('login-modal',
() => import('./components/LoginModal')
)
在main.js中axios.interceptors.response.use(用于检查所有ajax请求的状态。工作正常，但现在需要调用LoginModal函数，以在API状态为401的情况下打开模式
axios.interceptors.response.use(
res => res,
err => {
if (err.response.status == 401) {
router.push('/login')
//call to component method instead instead of **router.push('/login')**
}
}
);
在vue模板中，我们使用像这样的引用
this.$refs.loginModal.open()
但是不知道如何从main.js调用组件函数
满足要求的一种方法是，您可以在$ root / vm上启动，即使在很多情况下，避免这种情况也是最佳做法。
无论如何，您可以在main.js中添加以下内容：
axios.interceptors.response.use(
res => res,
err => {
if (err.response.status == 401) {
vm.$emit('openLogin');
}
}
);
然后将您的登录模式添加到App.vue中，而不是main.js中，并在其中监听$ root，如下所示：
mounted() {
this.$root.$on('openLogin', () => {
this.$refs.loginModal.open()
})
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句