I've got a long-standing vue application that uses 3rd party login for people to authenticate. An issue that we need to fix is that when a user hits a given page via a link, the page briefly displays in a half-rendered state before the user gets redirected to the 3rd party to authenticate. The 'container' rendering is ok, but not the main content of the page. I can move the auth check code to earlier parts of the life-cycle, but the flicker never quite goes away.
Is there an idiomatic way in Vue to prevent the main content of a page from rendering until some other validation (e.g. auth creds) has finished? Is there a standard flow for auth and auth redirects in particular?
If you haven't tried it, I would suggest validating auth via a nav guard, provided you're using vue-router. I would also suggest wrapping the 'secret' component with a parent component and validating auth on the parent component using beforeEnter