I'm learning Nuxt.js and I'm puzzled by how difficult it seems to be to simply redirect a user to another page from a method that is triggered via a click.
Here is the set up: I'm using Nuxt Auth to authenticate users, once authenticated I want them to be forwarded away from the signup page to another route. I already have middleware set up that redirect logged-in users, but it is only triggered when I refresh the page, not when I first log them in.
I have a method like this:
async login(event) {
event.preventDefault()
try {
await this.$auth.loginWith('local', this.loginData)
// this is where my redirect logic should go
} catch(error) { ... }
}
So far I've tried using this.$nuxt.refresh() which doesn't do anything at all and I've also tried this.$router.push('/route') which seems to hang the page completely. Ideally, I would prefer the refresh approach so that I don't have to specify the landing page for logged in users in multiple places, but I also need to know how to use redirections inside methods, I would have thought it should be the most simple operation imaginable and yet it seems to be difficult to find.
Any tips would be highly appreciated!
UPDATE:
I've found a solution, although it's not an ideal one. I've added an if-statement into beforeCreate that checks this.$auth.loggedIn and if it's true, then it calls this.$auth.redirect('home') when "home" is defined in nuxt.config.js under auth redirect. The reason this solution is not ideal is that it relies on the auth module (as opposed to being a general redirect mechanism).
There's a way in Nuxt to reload the page like so:
this.$router.go(0)
also you can find more information here
if this.$router is not working, try this
this.$nuxt.$options.router.push(url);
Related
I've been trying to rework an app to use the new session auth system.
Everything seems to work fine, however I am not able to use the Navigation (polaris) component successfully.
Let's say I have something like this :
<Navigation.Section
items={[
{
url : '/faq',
label : translations.faq,
icon : HintMajor
}
]}
/>
If I only put /faq I am unable to access the route. I am redirected to /auth and get obviously an error.
The only way I manage to make my routes work is to :
Add the shop query in each url like this :
// ...
url : '/faq?shop=${shop}',
// ...
Add every needed routes manually in my server.js WITHOUT the verifyRequest middleware (which does not seem like a good option to me)
// ...
router.get('/faq', handleRequest)
// ...
Can someone explain if I am doing anything wrong ?
(I am managing my SESSION_STORAGE with the custom redis storage shown in the repo doc https://github.com/Shopify/shopify-node-api/blob/main/docs/usage/customsessions.md)
Are you not supposed to have a wildcard in your App routes so that when you deliver backed end code it is doing just that, and leaving authentication to having the token in your header? No token and a request for anything authenticated and you then direct to login?
Problem
I have an electron app with vue. As the user has no UI to navigate back I created a back button.
This works so far so good. But being logged in and on the index page the user shouldn't be able to navigate back any more. As he would navigate back to the login but would get redirected back to the index page. And this wouldn't make much sense. For that I want to disable the back button.
Tested
I have added a global variable to get the previous route in my components. But somehow this gets messed up when clicking twice or more often. It looks like that:
router.beforeEach((to, from, next) => {
Vue.prototype.$prevRoute = from;
return next();
});
I think it is because when navigating back the previous route changed to the route you were coming from. And not the history anymore.
There seems to be a github feature request to add the referrer but it was opened in 2016 and I am not sure if it will be again the same problem as above.
https://github.com/vuejs/vue-router/issues/883
In-component guards
I also tested beforeRouteLeave and beforeRouteUpdate but as the back-button is in my layout these methods are not called.
Application-design
I am having a login-page with authentication. After that the user-information is stored in the local-storage and I am using a middleware concept for redirecting (https://markus.oberlehner.net/blog/implementing-a-simple-middleware-with-vue-router/)
To go back I am using this method: this.$router.back()
Expectation
My expected result would be to be able to check in the back-button-component if the back-route will be the login or if there the going-back-stack has only one value left. In that case I would disable my back-button.
I'm working on a larger project and need to create a separate UX for mobile users on some pages. Using a responsive layout with CSS won't cut it, and dynamic component rendering with v-if results in a horrifying template.
This answer is the closest that I have come to, but I want to avoid manually defining routes as there are a ton of pages.
I am currently using a middleware to redirect based on a user agent check:
export default function(context) {
if (context.isMobile) {
if (context.route.fullPath.indexOf('/m') !== 0) {
return context.redirect('/m' + context.route.fullPath)
}
}
if (context.isDesktop) {
if (context.route.fullPath.indexOf('/m') === 0) {
return context.redirect(context.route.fullPath.substring(2))
}
}
}
but I don't have a way of telling whether there is a mobile version or not, so if there isn't, the error page will be displayed.
I also tried working with this answer but using nuxt-device-detect instead of breakpoints, but since the router is configured before getting in the browser, the check function will return the fallback option, so it didn't work well for me. Also since I'll be using SSR I'm avoiding things like document.documentElement.clientWidth.
I guess in short, my question is: what is the best practice for serving separate pages to mobile users?
Is there a good way to redirect to a specific page using Stencil right after logging in? It defaults to the my account, but want to send to main shop page. I know login.php?from= works, just not sure how to enforce that and looking for a better way.
I'd recommend a javascript redirect based on the referring URL, though it isn't ideal. There isn't a store setting to accomplish this.
if (document.referrer !== "http://www.stackoverflow.com") {
window.location.href = "http://www.google.com";
}
There are alternative scripts to accomplishing this that can be found if you look for "redirect by referring url" or "redirect based on previous page".
The Aurelia router remembers which page I was last on, even after using setRoot() and it will redirect me to that page, even though I would want to land on the main app page again.
I'll try to explain it in a usecase.
I have two apps: login and app.
I login in login app and get redirected to app.
I navigate to /securedPage on app and then proceed to log out and get redirected to login again.
I login with another user on login and then I get redirected to app/securedPage.
I want to be and should be redirected to just app.
How do I clear the route history when switching between apps with setRoot()?
Wanted to help out, recently got this working and the suggestions above almost work, but they are missing some parts. In this thread, the creator of Aurelia (Eisenberg) repsonds with a suggestion:
https://github.com/aurelia/framework/issues/590
So to switch app root do the following:
this.router.navigate('/', { replace: true, trigger: false });
this.router.reset();
this.router.deactivate();
this.aurelia.setRoot('app');
In my case I could actually skip the reset and deactivate part and just do
this.router.navigate('/', { replace: true, trigger: false });
However doing this.router.navigate('/') without the replace and trigger part caused problems especially when switching app root multiple times.
So make sure to add:
... { replace: true, trigger: false });
did you try
this.router.deactivate();
this.router.reset();
this.app.setRoot('app');
It is not pretty but this this did the trick for me:
router.navigate("/");
aurelia.setRoot("login")