Mixing
Page transition effects with global vue-router navigation guards
I have a global vue-router navigation guard - a beforeResolve() hook - which implements a Basic authentication check against the backend:
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);
The problem is, as you might guess, that because this navigation process occurs with every state transition (it’s a very naive auth setup, no tokens or caching), there’s a delay from the moment the user clicks a <router-link> to the time that a “screen” actually begins to load, with any attendant spinners, etc.
So, the question is:
Given how abstracted this navigation guard seems to be from any sort of component rendering or instantiation, is there some way I can signal a state change to the current component to indicate that the hook is currently in the process of executing its async/Promise chain?
I do use the Vuex store, if that helps. However, this hook is bound before I even instantiate the root Vue() instance, so I’m not sure how I’d commandeer the store to be of aid there, since one can only presume that there’s no way to get at the store instance inside the hook–at least, in ways that lead to meaningful mutations visible to other components once the root Vue() instance is initialised.
Thank you for your assistance!
vue.js vue-router
asked Nov 20 '18 at 19:19
Alex BalashovAlex Balashov
1,66831830
add a comment |
I have a global vue-router navigation guard - a beforeResolve() hook - which implements a Basic authentication check against the backend:
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);
The problem is, as you might guess, that because this navigation process occurs with every state transition (it’s a very naive auth setup, no tokens or caching), there’s a delay from the moment the user clicks a <router-link> to the time that a “screen” actually begins to load, with any attendant spinners, etc.
So, the question is:
Given how abstracted this navigation guard seems to be from any sort of component rendering or instantiation, is there some way I can signal a state change to the current component to indicate that the hook is currently in the process of executing its async/Promise chain?
I do use the Vuex store, if that helps. However, this hook is bound before I even instantiate the root Vue() instance, so I’m not sure how I’d commandeer the store to be of aid there, since one can only presume that there’s no way to get at the store instance inside the hook–at least, in ways that lead to meaningful mutations visible to other components once the root Vue() instance is initialised.
Thank you for your assistance!
vue.js vue-router
asked Nov 20 '18 at 19:19
Alex BalashovAlex Balashov
1,66831830
add a comment |
I have a global vue-router navigation guard - a beforeResolve() hook - which implements a Basic authentication check against the backend:
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);
The problem is, as you might guess, that because this navigation process occurs with every state transition (it’s a very naive auth setup, no tokens or caching), there’s a delay from the moment the user clicks a <router-link> to the time that a “screen” actually begins to load, with any attendant spinners, etc.
So, the question is:
Given how abstracted this navigation guard seems to be from any sort of component rendering or instantiation, is there some way I can signal a state change to the current component to indicate that the hook is currently in the process of executing its async/Promise chain?
I do use the Vuex store, if that helps. However, this hook is bound before I even instantiate the root Vue() instance, so I’m not sure how I’d commandeer the store to be of aid there, since one can only presume that there’s no way to get at the store instance inside the hook–at least, in ways that lead to meaningful mutations visible to other components once the root Vue() instance is initialised.
Thank you for your assistance!
vue.js vue-router
asked Nov 20 '18 at 19:19
Alex BalashovAlex Balashov
1,66831830
I have a global vue-router navigation guard - a beforeResolve() hook - which implements a Basic authentication check against the backend:
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);
The problem is, as you might guess, that because this navigation process occurs with every state transition (it’s a very naive auth setup, no tokens or caching), there’s a delay from the moment the user clicks a <router-link> to the time that a “screen” actually begins to load, with any attendant spinners, etc.
So, the question is:
Given how abstracted this navigation guard seems to be from any sort of component rendering or instantiation, is there some way I can signal a state change to the current component to indicate that the hook is currently in the process of executing its async/Promise chain?
I do use the Vuex store, if that helps. However, this hook is bound before I even instantiate the root Vue() instance, so I’m not sure how I’d commandeer the store to be of aid there, since one can only presume that there’s no way to get at the store instance inside the hook–at least, in ways that lead to meaningful mutations visible to other components once the root Vue() instance is initialised.
Thank you for your assistance!
vue.js vue-router
vue.js vue-router
asked Nov 20 '18 at 19:19
Alex BalashovAlex Balashov
1,66831830
asked Nov 20 '18 at 19:19
Alex BalashovAlex Balashov
1,66831830
asked Nov 20 '18 at 19:19
Alex BalashovAlex Balashov
1,66831830
asked Nov 20 '18 at 19:19
Alex BalashovAlex Balashov
1,66831830
asked Nov 20 '18 at 19:19
Alex BalashovAlex Balashov
1,66831830
1,66831830
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400066%2fpage-transition-effects-with-global-vue-router-navigation-guards%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400066%2fpage-transition-effects-with-global-vue-router-navigation-guards%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
