Question

我有一个全局vue-router导航守护程序-一个beforeResolve()钩子-该钩子对后端实现了基本身份验证检查：

let router = new VueRouter({ routes });

router.beforeResolve((to, from, next) => {
    if(to.path === '/login') {
        next();
        return;
    }

    let auth = new JSUMC2Auth(UIConfig);
    let cfg = new JSUMC2ConfigKeys(UIConfig, configKeys);

    auth.try().then(r => {
        if(r.success)
            return Promise.resolve();

        return Promise.reject();
    }).then(() => {
        return cfg.fetchConfigKeys({
            authData: auth.getAuthParams()
        });
    }).then(() => {
        next();
    }).catch(e => {
        next({path: '/login', replace: true});
    });
});

let params = { router };

return new Vue(params);

问题是，正如您可能猜到的，因为此导航过程随每个状态转换而发生（这是一个非常幼稚的身份验证设置，没有令牌或缓存），所以从用户单击{{1} }到“屏幕”实际开始加载的时间，以及所有随之而来的微调器等。

所以，问题是：

鉴于此导航保护措施似乎是从任何种类的组件呈现或实例化中抽象出来的，我是否可以通过某种方式向当前组件发出状态更改信号，以指示该挂钩当前正在执行其{{ 1}} / <router-link>链？

如果有帮助，我会使用Vuex存储。但是，此钩子在我甚至实例化根async实例之前就已绑定，所以我不确定如何命令商店在那儿提供帮助，因为一个人只能假定没有办法获得帮助。至少在初始化Promise根实例后，至少会导致其他组件可见的有意义的突变。

谢谢您的协助！

全局Vue-Router导航防护的页面过渡效果

0 个答案: